Split available width between two divs

css, css-float

Solution

Make use of `overflow:hidden` (or overflow:auto - as long as overflow isn't set to visible [the default]) to trigger `block formatting contexts` to fill remaining width

(I have assumed a fixed width of 100px for div1 and div4)

FIDDLE

Markup

<div class="div1">DIV 1</div>
<div class="container">
    <div class="div2">DIV 2</div>
    <div class="div3">DIV 3</div>
</div>
<div class="div4">DIV 4</div>

CSS

html,body,div
{
    height: 100%;
}
.div1 {
    float:left;
    width: 100px;
    background: aqua;
}
.container
{
   overflow: hidden;
   padding-right: 100px;
   box-sizing: border-box;
    background: green;
}
.div2 {
    background:yellow;
    float:left;
}
.div3 {
    background:brown;
    overflow: hidden;
}
.div4 {
    position: absolute;
    right:0;
    top:0;
    background:pink;
    width: 100px; 
}

Problem

I have a container (width is not known) containing four divs, as follows: ``` | Div1 | Div2 ............... | .............. Div3 | Div4 | ``` The leftmost and rightmost divs (Div1/Div4) are fixed width; that's the easy part. The width of Div2/Div3 is not known, and I would like to avoid setting a fixed width for them, as depending on the content one can be much wider than the other (so I cannot just e.g. have each one use 50% of the available space) I would like the width of Div2/Div3 to be automatically computed by the browser, then if there is any remaining space left, they should stretch to fill any remaining space (it does not matter how the remaining space is split between Div2/Div3) The way I am approaching this right now is: - Div1 floated left (or absolutely positioned) - Div4 floated right (or absolutely positioned) - Div2 has a margin-left equal to the width of Div1 (known) - Div3 has a margin-right equal to the width of Div4 (known) My question is, how to have Div2 and Div3 stretch to fill the remaining available width? I guess one option would be to use display: table, and another possibility would be flex-box. Are there any alternatives? Update: Edited for clarity. Update 2: Please note that I cannot assume that Div2 and Div3 should each get 50% of the available space. This is explicitly stated in the question but somehow I keep getting answers based on this assumption.

Original source