Smashing Magazine, for all their “Top 10″ and “Best 50″ articles, continues to occasionally post very helpful and mind-bending articles about Design and Production.
Their newest article about CSS is aimed at the CSS beginner, but has a few tricks that I wasn’t even aware of.
Floating and Overflow
The first, I want to point out is something that has always bugged me: the fact that a floated image is not completely contained within its parent container. Apparently this can be fixed simply by adding overflow:hidden to the div (autoflow:auto also works).
Floating and Double Margins (ie6 Bug)
Additionally, Internet Explorer 6 seems to double the margin of floated elements. So your 5px margin becomes 10px in IE6, and is the cause of all of my perfectly aligned floating divs crashing to the ground when I test the page in IE6 (grumble grumble hate hate)
This is also easy to fix: just add display: inline to your floated element.
.floated_element {
float: left;
width: 200px;
margin: 5px;
display: inline; /*--IE6 workaround--*/
}
Deserves a once-over
There were alot of other great tips and points that even seasoned CSS-ers should look at — you never know when you might find something new, or an easy way to do something you had been futzing with. If you get a chance, it’s definitely worth a look.
