[ACCEPTED]-CSS - make div's inherit a height-height

As already mentioned this can't be done 31 with floats, they can't inherit heights, they're 30 unaware of their siblings so for example 29 the side two floats don't know the height 28 of the centre content, so they can't inherit 27 from anything.

Usually inherited height has 26 to come from either an element which has 25 an explicit height or if height: 100%; has been passed 24 down through the display tree to it.. The 23 only thing I'm aware of that passes on height 22 which hasn't come from top of the "tree" is 21 an absolutely positioned element - so you could for example absolutely 20 position all the top right bottom left sides 19 and corners (you know the height and width 18 of the corners anyway) And as you seem to 17 know the widths (of left/right borders) and 16 heights of top/bottom) borders, and the 15 widths of the top/bottom centers, are easy 14 at 100% - the only thing that needs calculating 13 is the height of the right/left sides if 12 the content grows -

This you can do, even without using all 11 four positioning co-ordinates which IE6 10 /7 doesn't support

I've put up an example based 9 on what you gave, it does rely on a fixed 8 width (your frame), but I think it could 7 work with a flexible width too? the uses 6 of this could be cool for those fancy image 5 borders we can't get support for until multiple 4 background images or image borders become 3 fully available.. who knows, I was playing, so 2 just sticking it out there!

proof of concept 1 example is here

The Problem

When an element is floated, its parent no 13 longer contains it because the float is 12 removed from the flow. The floated element 11 is out of the natural flow, so all block 10 elements will render as if the floated element 9 is not even there, so a parent container 8 will not fully expand to hold the floated 7 child element.

Take a look at the following 6 article to get a better idea of how the 5 CSS Float property works:

The Mystery Of The CSS Float Property

A Potential Solution

Now, I think the 4 following article resembles what you're 3 trying to do. Take a look at it and see 2 if you can solve your problem.

Equal Height Columns with Cross-Browser CSS

I hope this 1 helps.

The negative margin trick:

http://pastehtml.com/view/1dujbt3.html

Not elegant, I 1 suppose, but it works in some cases.

You need to take out a float: left; property... because 8 when you use float the parent div do not 7 grub the height of it's children... If you 6 want the parent dive to get the children 5 height you need to give to the parent div 4 a css property overflow:hidden; But to solve 3 your problem you can use display: table-cell; instead 2 of float... it will automatically scale 1 the div height to its parent height...

Most of the times, the Previous parent has 9 a heigt manually set, so you can use that 8 value as reference, no other dirty tricks 7 will be needed, and if the number is not 6 the same for any reason maybe a comment 5 can be added with the original number so 4 in case you need to change it, by searching 3 at the all the values, this one can be adjusted 2 or even changed, in the time someone resolve 1 this one for us.