Question about min-height and overflow...

[Recoil]

So I'm getting back into web design after a several-year hiatus, and naturally, that means catching up with everything that's changed since then. One of those of course being the now obscene level of importance that CSS has grown to.

I used it before of course for silly effects like everyone did way back when, but now, it's the core of webdesign itself, and I'm just messing around today getting used to doing the actual design with it. It's pretty neat. But I've run into this little... "thing" that I have a question about, regarding the behavior of the min-height property...


Click:
http://recoil.googlepages.com/index.htm

Now resize your browser window, make it extremely narrow. Observe:

Why does the orange-coloured div-box (defined with the class "rounded") overflow the content div-box (defined with the class "content")?

content only has a min-height property.... so shouldn't it scale with its contents, as the orange box has done to fit its text?

What is going on here?

[Starpromo]

By assigning those DIVs with actual widths you can combat the browser resize issue.

[Recoil]

I think you're misunderstanding me -- rounded (the orange text box) is a child of content (the faint grey box).

Content is not set to a specific height, and that's the point -- shouldn't, as the smaller box pushes outward on it's container, the container give way, and accommodate the smaller box by making itself bigger?

[Starpromo]

So you want both DIVs to resize together at the same rate?

[Recoil]

No, not so much, as that when the smaller one "hits" the larger one, it will start "pushing" it larger, rather than just break the boundaries.

Here's an example of how it works in old-school HTML with tables:

http://recoil.googlepages.com/tablesexample.htm


See what I mean?

The smaller box doesn't go past the boundaries of the larger box -- it forces it to grow to accommodate the smaller box's new boundaries.

[Starpromo]

Im not totally sure but as far as im aware a table work completyy different to a DIV. A DIV is just a division of a page where as a table is an object.

So my answer based on what i know is that there is no way for that DIV to push the other one and the only way would be for the browser to push them both at the same time.

But i could be wrong.