For the past couple months, I’ve been using the Modular CSS and CSS Framework developed by Mike Stenhouse over at Content with Style. I find it to be a rather powerful approach that has served me pretty well so far.

Recently, I came across Alex Walker’s Site Point article about Simple Clearing of Floats. In it, he describes the four techniques used for clearing floated items - The Markup Method (using extra cleared elements), the Aslett/PIE clearfix method, Steve Smith’s Float Nearly Everything, and the use of overflow:auto, as suggested to Alex by Paul O’Brien.

Stenhouse’s CSS Framework employs the use of the Aslett/PIE method. This involves adding class="clearfix" (or whatever you choose for that class) to all containers that have floated items inside. It’s a pretty slick solution that works pretty well for the Framework.

After reading about using overflow:auto, I decided to see what would happen if I used the overflow method instead of the Aslett/PIE method on the CSS Framework. I tested it in the Mac browsers I have (Mac IE, Safari 2, Opera 8, Camino/Firefox/Mozilla/Netscape, and everything more or less worked out as it should have. Two items came up when I tested it:

1. In Mac IE 5.2, overflow:auto adds scrollbars to the elements that have this property. The fix is to add change the overflow property’s value to hidden just for Mac IE. The scrollbars disappear and all is well.
2. Negative tops, absolute positioning and overflow. The CSS Framework puts the navigation inside of the #content block. To position it appropriately, the navigation block is given position:absolute. It appears that if the container has the overflow property, and the navigation is horizontally spanning across the content, then the negative top value does not work appropriately. The navigation sits inside the #content block, atop the content itself. The only fix I’ve found is to add some top padding to the #content block to adjust for this. The navigation does not overlap the content. I also had to make some adjustments to the #header block’s margin-bottom to keep the spacing in tact.

With these two items accounted for, all seems to be working well. Now to test it out on the PCs.