Div box not expanding on overflow

Question

I have the following html (not proper code but for understanding)

<div id=content-wrap overflow-hidden>
<div1 float-left overflow hidden> </div>
<div2 float-right overflow hidden> </div>

</div>

Now when the content in div 1 is more, then it expands the main container but by div2 which is on the right is not expanding

Is there any way so that div2 also expands with div1 without changing the html

Answer 1

You will need javascript to make this work. You won't be able to fix this with CSS. What you can do, is give both 'columns' a height of 100%, but I don't think that's what you want.

Answer 2

If you want to throw in some CSS3 (not supported in all browsers) you could do something found here: http://www.css3.info/preview/multi-column-layout/

Answer 3

I think it is not possible with divs. Tables solve the problem. When div1 expands, it is impossible to expand div2 also ! using some javascript will solve the problem

Answer 4

The way to do that with CSS 2.1 is to use display table:

#content-wrap {
    display: table-row;
}
#content-wrap div {
    display: table-cell;
}

The reason why most people don't use it is that it doesn't work in IE6 & 7, also you'll need an extra wrapper element for the display: table declaration for everything to work properly.

An alternative approach with CSS3 is to use flexboxes:

#content-wrap {
    display: -moz-box;
    display: -webkit-box;
    display: box;
}
#content-wrap div {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}

Answer 5

This is worth a shot:

#content-wrap { position: relative; }
#div2 { position: absolute; top: 0; bottom: 0; }

I don't think this technique works in IE6, and it doesn't seem to work in every circumstance, but I stumbled upon it about a week ago. Essentially, you're telling the top and bottom of the element to be at the maximums, so it stretches. Note that this will only work without a fixed height.