DIV Height - Cross Browser

~J~

~J~

~J~

Soldato
Joined
20 Oct 2003
Posts
7,558
Location
London
If I have a DIV that is the parent container for 2 other DIVS (a left and right column), how can I make the parent DIV grow based on the largest of the column DIVs?

Been looking at a few sites today to try and get ideas and can't see any obvious way!

Have also looked at a few forums but they all tend to go off into arguments about Firefox V IE and W3C compliance.

Has anyone a straight answer that they may be able to give please?

TIA
 
Presumably the child <div>s are floated; the effect you're seeing is standard behaviour. Floated elements are removed from the regular document flow (to allow sibling elements to wrap around them), and as such don't exhibit the same effect on surrounding elements like a regular 'block' box.

Technique you're looking for is 'clearing floats' - there are several methods. The simplest is to apply the overflow: auto; property to the parent <div>. This property says that the parent div should expand to accomodate anything that overflows its borders i.e. either of the floated columns.

More about the technique: http://www.quirksmode.org/css/clearing.html
More about floats: http://www.digital-web.com/articles/web_design_101_floats/
 
Spot on, I am using FLOATS, glad to hear there's a proper word for the problem then - 'clearing floats'.

Thanks for that, will have a look now and see if it sheds any light.

Many thanks again.
 
You must log in or register to reply here.
Back
Top Bottom