Take the 2-minute tour ×

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)

share|improve this question
I counld not open the link, not sure if it's me though... –  Trufa Mar 29 '11 at 15:28
add comment

5 Answers

up vote 12 down vote accepted

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

share|improve this answer
Hey clairesuzy.. I really like your answer! Allthough i can't get it to work properply without a fixed width :( –  Don Pedro Mar 30 '11 at 7:15
Hiya Don, I got it to work, - jsbin.com/apiqu5 - see the first two lines in the CSS, IE does need hasLayout set on the inner wrapper, I used zoom: 1; - hth –  clairesuzy Mar 30 '11 at 8:27
Hi again.. On your new example the box fills out the entire screen on both FF, Safari and Chrome, where it instead should stop after the text :S –  Don Pedro Mar 30 '11 at 8:52
it is stopping after the text, the text is p's - but they're short p's ;) they are 100% wide by default, the frame has to take it's width from a parent, in this case it's using the body element, if it were in a sidebar, for example it would be narrower - try sizing the browser or adding longer paragraohs –  clairesuzy Mar 30 '11 at 9:01
Exactly! Thank you so much :)! –  Don Pedro Mar 30 '11 at 9:54
show 7 more comments

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...

share|improve this answer
add comment

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.

share|improve this answer
You need to swap the links. –  Kekito Mar 29 '11 at 16:25
@Jeff... haha thanks! –  Hristo Mar 29 '11 at 16:30
add comment

The negative margin trick:


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

share|improve this answer
add comment

Try putting test_mid_left and test_mid_right into the test_mid_center and make height 100%

share|improve this answer
Didn't work unfortunately :/ –  Don Pedro Mar 29 '11 at 16:03
add comment

Your Answer


