Div is not expanding its container div properly

HTML & CSS
1

…or perhaps it is doing it properly, and my CSS is F’d up.

Here’s the culprit:

http://www.dorseygraphics.com/review/vialuxe/web2010/04/rs_dc_management.html

http://www.dorseygraphics.com/review/vialuxe/web2010/04/css/styles.css

The right box (.content50right) is not correct in Firefox 3 but looks fine in MSIE 6 & 7 (really? YES!!)

Both boxes should expand their container (.content50) but it looks like only the left box (with the image in it) is doing that. The right box freaks out in FF3.

I’m very confused. I thought my columns would scale each other to the height of whichever one was taller. It seems not to be working.

Any help is appreciated.

-----------S

2

No problem … glad to be of assistance :slight_smile:

We’ve all been there lol

Once you have those two things in your head … fewer problems will occur lol

3

Tremendously helpful, thank you very much!

4

What you were expierincing is called containing floats. The overflow:hidden ensures that your floated column is contained by it’s parent. Without it, the container collapses and the floated child ‘spills out’. There are several ways to achieve it but the overflow:hidden works best in most cases.

You can read about in the faq

The reason IE was ‘correct’ ( in fact was wrong) is because the parent had a dimension (if i recall your css). This give IE hasLayout and makes it behave as a good browser :slight_smile:

About hasLayout:

here are the obligated to read things:

onhavinglayout

haslayout

The last one i prefer because it’s easier to understand :slight_smile:

5

Okay - that worked.

But why?

I was under the impression that overflow:hidden; is just for making sure scroll bars don’t pop up if the content extends past a DIV’s height. But my DIV has no height and requires no scrollbars.

6

Haven’t checked but try to add


overflow:hidden;

to the parent .content50

Does that help?