CODEWITHSUNDEEP
csshtml
John
John

Reputation:

Div box not expanding on overflow

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

Upvotes: 0

Views: 939

Answers (5)

robertc
robertc

Reputation: 75707

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.

Upvotes: 0

Ryan Kinal
Ryan Kinal

Reputation: 17732

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.

Upvotes: 0

Aakash Chakravarthy
Aakash Chakravarthy

Reputation: 10691

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

Upvotes: 0

Jason
Jason

Reputation: 52523

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/

Upvotes: 0

Kevin
Kevin

Reputation: 5694

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.

Upvotes: 1

Related Questions