CSS - make div s inherit a height

Question

I m trying to make a box with rounded corners where the height and width of the div depends on the content  so it s automatically adjust to it     You can see the example here  http   pastehtml com view 1duizyf html  The problem is that i can t get the  test mid left   black background  and  test mid right   turquoise background  to inherit the height from the  test mid center   green background   I have tried height  100  and auto  but none of thoose work  So how do I get them to inherit the height from the content    The reason why I have used  min-height  xx  in the left and right content on the example is just to show which boxes I am talking about

User · Answer

The negative margin trick   http   pastehtml com view 1dujbt3 html  Not elegant  I suppose  but it works in some cases

User · Answer

You need to take out a float  left  property    because when you use float the parent div do not grub the height of it s children    If you want the parent dive to get the children height you need to give to the parent div a css property overflow hidden  But to solve your problem you can use display  table-cell  instead of float    it will automatically scale the div height to its parent height

User · Answer

The Problem  When an element is floated  its parent no longer contains it because the float is removed from the flow  The floated element is out of the natural flow  so all block elements will render as if the floated element is not even there  so a parent container will not fully expand to hold the floated child element   Take a look at the following article to get a better idea of how the CSS Float property works   The Mystery Of The CSS Float Property    A Potential Solution  Now  I think the following article resembles what you re trying to do  Take a look at it and see if you can solve your problem   Equal Height Columns with Cross-Browser CSS  I hope this helps

User · Answer

As already mentioned this can t be done with floats  they can t inherit heights  they re unaware of their siblings so for example the side two floats don t know the height of the centre content  so they can t inherit from anything   Usually inherited height has to come from either an element which has an explicit height or if height  100   has been passed down through the display tree to it   The only thing I m aware of that passes on height which hasn t come from top of the  tree  is an absolutely positioned element - so you could for example absolutely position all the top right bottom left sides and corners  you know the height and width of the corners anyway  And as you seem to know the widths  of left right borders  and heights of top bottom  borders  and the widths of the top bottom centers  are easy at 100  - the only thing that needs calculating is the height of the right left sides if the content grows -  This you can do  even without using all four positioning co-ordinates which IE6  7 doesn t support  I ve put up an example based on what you gave  it does rely on a fixed width  your frame   but I think it could work with a flexible width too  the uses of this could be cool for those fancy image borders we can t get support for until multiple background images or image borders become fully available   who knows  I was playing  so just sticking it out there   proof of concept example is here

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

Examples related to html

Examples related to css

Examples related to inheritance

Examples related to height