…or perhaps it is doing it properly, and my CSS is F’d up.
Here’s the culprit:
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.
No problem … glad to be of assistance
We’ve all been there lol
Once you have those two things in your head … fewer problems will occur lol
Tremendously helpful, thank you very much!
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
here are the obligated to read things:
The last one i prefer because it’s easier to understand
Okay - that worked.
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.
Haven’t checked but try to add
to the parent .content50
Does that help?