18

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)

braX
  • 11,506
  • 5
  • 20
  • 33

5 Answers5

27

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

clairesuzy
  • 27,296
  • 8
  • 54
  • 52
  • Hey clairesuzy.. I really like your answer! Allthough i can't get it to work properply without a fixed width :( –  Mar 30 '11 at 07:15
  • Hiya Don, I got it to work, - http://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 08: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 –  Mar 30 '11 at 08: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 09:01
  • I'm not quite sure I follow you, cause if you see this example the width still fills out 100% of the box :S http://pastehtml.com/view/1dux1xf.html –  Mar 30 '11 at 09:29
  • my bad, the frame (like any default div) will be 100% of the width available to it, if you want "shrinkwrapping" - float the frame div - http://jsbin.com/apiqu5/2 – clairesuzy Mar 30 '11 at 09:38
  • You're Welcome, sorry for not "getting" the shrinkwrapping the first time ;) – clairesuzy Mar 30 '11 at 10:15
  • @clairesuzy: Just so you know, IE7 *does* support "all four positioning co-ordinates" at the same time, see in IE7: http://jsbin.com/asetu3 – thirtydot Mar 30 '11 at 14:44
  • jeez *headslap*.. I *do* know that, I've forgotten more about IE foibles than I remember - I actually had to work with IE5 upwards! (you're too young haha) - but thanks for pointing out my error, makes no difference to the solution though, I prefer to use the heights, hasLayout, I believe, did still cause some positioning problems in IE7 think that's why I still avoid it.. can't remember LOL! ;) – clairesuzy Mar 30 '11 at 14:56
  • @clairesuzy: IE6 is the worst I've had to put up with :) I just felt like pointing it out because it's the second time I've seen you say it. I don't remember either, but IE7 is sufficiently crazy enough that I don't doubt there might be problems in some cases. – thirtydot Mar 31 '11 at 09:39
  • no worries, I'd rather be corrected - IE6 is/was indeed a problem child! - Maybe that's the reason I choose to forget about using the 4 co-ordinates still ;) - If I find/remember an example where IE7 doesn't get it quite right, I'll try to post here but in all likelihood it would be hasLayout related anyway and it would be a zoom fix on the parent (which my example needed anyway eventually) I think I stay in IE6 "mode" because the IE7 fixes weren't really fixes they were patches! ;) – clairesuzy Mar 31 '11 at 09:55
8

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.

Hristo
  • 45,559
  • 65
  • 163
  • 230
0

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

Aram Sargsyan
  • 1
0

The negative margin trick:

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

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

0

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

MasterOdin83
  • 38
  • 6