# Omg Wtf Css Div Ffs
**URL:** https://boards.straightdope.com/t/omg-wtf-css-div-ffs/449420
**Category:** Factual Questions
**Created:** [May 15, 2008, 1:17pm UTC](https://boards.straightdope.com/t/omg-wtf-css-div-ffs/449420 "2008-05-15T13:17:12Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@jjimm](https://boards.straightdope.com/u/jjimm)
#### Post date: [May 15, 2008, 1:17pm UTC](https://boards.straightdope.com/t/omg-wtf-css-div-ffs/449420/1 "2008-05-15T13:17:12Z")
OK, yet another CSS problem to ponder over. I have no idea what I’m doing wrong.
The problem is that the content of one of my DIVs overflows the DIV below it. And an enclosing DIV simply collapses.
The shape of the page is as follows:
BANNER
MENU CONTENT
FOOTER
Simple, eh?
I have even defined a DIV with a value “Clear: left;” which is meant to give the divs a break from each other (class=“clearit”).
I have enclosed everything in a DIV called “enclosure” to define the width and centre the page. I have enclosed the menu and content in an enclosing DIV. The menu div is float: left and the content doesn’t have a float value assigned to it - it just fills up the rest of the space in the contentenclosure.
```auto
```
How simple is that?
The banner and the footer work fine if the content doesn’t exceed the height of the menu. If it does, then disaster. Plus, the “contentenclosure” DIV just collapses, regardless of what’s inside it.
Any ideas?
---
### Author:  [@Mangetout](https://boards.straightdope.com/u/Mangetout)
#### Post date: [May 15, 2008, 1:27pm UTC](https://boards.straightdope.com/t/omg-wtf-css-div-ffs/449420/2 "2008-05-15T13:27:46Z")
This sounds like pretty much the same problem I was having when I tried to set up the Atomic Shrimp template a week or two ago.
I tried what [this](http://www.quirksmode.org/css/clearing.html) page suggested, but it didn’t work for me - at least not in all browsers. but I was using multiple floats.
---
### Author:  [@jjimm](https://boards.straightdope.com/u/jjimm)
#### Post date: [May 15, 2008, 1:55pm UTC](https://boards.straightdope.com/t/omg-wtf-css-div-ffs/449420/3 "2008-05-15T13:55:45Z")
Yay! Well, that’s good news - I didn’t use the solution you offered, but it did prompt me to use clear:both on my “clearit” divs, and bada bing, it works (in most major browsers - haven’t tried the notorious IE6 yet…).
Thanks for the pointer!
ETA: the embarrassing thing is, I do this for a living…
---
### Author:  [@Mangetout](https://boards.straightdope.com/u/Mangetout)
#### Post date: [May 15, 2008, 2:08pm UTC](https://boards.straightdope.com/t/omg-wtf-css-div-ffs/449420/4 "2008-05-15T14:08:15Z")
[QUOTE=jjimm]
Yay! Well, that’s good news - I didn’t use the solution you offered, but it did prompt me to use clear:both on my “clearit” divs, and bada bing, it works (in most major browsers - haven’t tried the notorious IE6 yet…).
Thanks for the pointer!
ETA: the embarrassing thing is, I do this for a living…
[/QUOTE]
It should work OK as long as you haven’t got multiple floats alongside each other on a horizontal line across the page. My problem was that I had the menu floated left, a sidebar floated right, then a column div between them with images floated left and right inside it.
My problem was that although the floated images were also each in their own divs, these image containers weren’t stretching to the full height of the image, meaning that other content outside the div was getting flowed alongside them as well - clearboth forced the div to stretch to the size of the longest item in the div, but it messed up the layout in IE6
IIRC, clearing floats in Firefox is constrained within the container object. In IE6, clearing floats inside a div also clears any others elsewhere on a horizontal line across the page, so in FF, everything was nice and tight, but in IE, it was a sprawling mess.
---
### Author:  [@Duckster](https://boards.straightdope.com/u/Duckster)
#### Post date: [May 15, 2008, 3:19pm UTC](https://boards.straightdope.com/t/omg-wtf-css-div-ffs/449420/5 "2008-05-15T15:19:42Z")
Surf over to here —\> [Clear Float: An Easy Guide on Using The CSS Clear Property](http://www.positioniseverything.net/easyclearing.html)
---
### Author:  [@Mangetout](https://boards.straightdope.com/u/Mangetout)
#### Post date: [May 15, 2008, 3:30pm UTC](https://boards.straightdope.com/t/omg-wtf-css-div-ffs/449420/6 "2008-05-15T15:30:59Z")
Yikes. Interesting, but I can’t help fearing the idea of solving cross-browser quirks by piling layer upon layer of hack into the code. I mean, I’m no expert in this field, but it seems to me that the more you do to accommodate one browser’s weirdness, the more you’ll have to do in the future to prevent the previous solution causing new problems. Yikes.
---
### Author:  [@Duckster](https://boards.straightdope.com/u/Duckster)
#### Post date: [May 15, 2008, 7:30pm UTC](https://boards.straightdope.com/t/omg-wtf-css-div-ffs/449420/7 "2008-05-15T19:30:45Z")
[QUOTE=Mangetout]
Yikes. Interesting, but I can’t help fearing the idea of solving cross-browser quirks by piling layer upon layer of hack into the code. I mean, I’m no expert in this field, but it seems to me that the more you do to accommodate one browser’s weirdness, the more you’ll have to do in the future to prevent the previous solution causing new problems. Yikes.
[/QUOTE]
That’s why you create/build web sites using a standards-compliant browser such as Firefox, Opera or Safari. **You completely ignore Internet Explorer.**
Once the site functions correctly when viewed in a standards-compliant browser, then you go back and create the specific hacks necessary to make it work in IE. Collect all the IE hacks into one CSS file to make them easier to locate and modify if need be.
Or run the risk and say screw IE altogether.
---
### Author:  [@jjimm](https://boards.straightdope.com/u/jjimm)
#### Post date: [May 15, 2008, 9:14pm UTC](https://boards.straightdope.com/t/omg-wtf-css-div-ffs/449420/8 "2008-05-15T21:14:21Z")
[QUOTE=Duckster]
Or run the risk and say screw IE altogether.
[/QUOTE]
If only the main site I ran didn’t have an 80% IE usage rate…
This is why I store [this brilliant graphic](http://i.thefairest.info/funniest_thumbs/ILRE2U.jpeg) in my bookmarks.
---
### Author:  [@Duckster](https://boards.straightdope.com/u/Duckster)
#### Post date: [May 15, 2008, 9:58pm UTC](https://boards.straightdope.com/t/omg-wtf-css-div-ffs/449420/9 "2008-05-15T21:58:48Z")
[QUOTE=jjimm]
If only the main site I ran didn’t have an 80% IE usage rate…
This is why I store [this brilliant graphic](http://i.thefairest.info/funniest_thumbs/ILRE2U.jpeg) in my bookmarks.
[/QUOTE]
In years past, many web sites did not cater to non-IE web users. Some sites went so far as to deny non-IE users entirely (think the Opera browser / Microsoft war). The more sensitive ones used browser sniffer code to send non-IE users to a web page urging them to use IE. Sine turnabout is fair play, I’ve been seeing more and more sites going back to browser-sniffing to display an unobtrusive comment that one’s web surfing would be more beneficial and enjoyable if one switched from IE to a standards-compliant browser.
---
### Author:  [@Mangetout](https://boards.straightdope.com/u/Mangetout)
#### Post date: [May 15, 2008, 9:59pm UTC](https://boards.straightdope.com/t/omg-wtf-css-div-ffs/449420/10 "2008-05-15T21:59:00Z")
[QUOTE=Duckster]
Or run the risk and say screw IE altogether.
[/QUOTE]
I’d love to do that\*, but IE isn’t going away, so I guess it’s a problem we just have to work with - and maybe it will just keep getting incrementally more difficult.
\*I did briefly entertain the notion of putting a little box under my site’s menu saying “if this site looks broken, try using a standards-compliant browser such as Firefox”, but I thought better of it - it would be a bit like those ebay listings where people write one paragraph describing the item, then six pages on what they’ll do if you dick them around.
---
### Author:  [@jjimm](https://boards.straightdope.com/u/jjimm)
#### Post date: [May 15, 2008, 10:06pm UTC](https://boards.straightdope.com/t/omg-wtf-css-div-ffs/449420/11 "2008-05-15T22:06:26Z")
[QUOTE=Duckster]
In years past, many web sites did not cater to non-IE web users. Some sites went so far as to deny non-IE users entirely (think the Opera browser / Microsoft war). The more sensitive ones used browser sniffer code to send non-IE users to a web page urging them to use IE. Sine turnabout is fair play, I’ve been seeing more and more sites going back to browser-sniffing to display an unobtrusive comment that one’s web surfing would be more beneficial and enjoyable if one switched from IE to a standards-compliant browser.
[/QUOTE]
Depends what kind of site you’re doing, I guess. I run big government and commercial sites, and that sort of techy one-upmanship, while I agree with the ethos, would be commercial (not to mention career) suicide. We need to lick the asses of the users and tell them about our products and services, not tell them how they could be doing things better. Besides, most medium-to-large company commercial traffic is browsing with a locked-down browser version that is controlled by the IT department, and that is often an old version of IE.