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

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;
}

–Edit

Now that I’m older and wiser, you actually only need this for the display: table approach:

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

It should work with your current markup, the layout engine will insert an anonymous table object to take on the table-row role.

Also note the flex box draft changed significantly recently, but browsers are still on the old draft.