Kristof Neirynck

25-5-2007, 10:30am – CSS Layouts in Dreamweaver CS3 by Stephanie Sullivan

Css positioning has allways been hard. The css starter pages Stephanie created for Dreamweaver CS3 are therefore more than welcome.

Lessons learned:

• Clearing a float in a non-floated element will clear the floats that are outside that element. So you need to float that surrounding element and optionally give it a with of 100%.
• Clearing a float can be done with a br, hr or div. I prefer Super simple clearing floats by Anne van Kesteren, but this way is indeed easier to understand.
• Float drop occurs when a float doesn’t have enough room. This requires you never to use images larger than the column width.
• Stephanie mentions Creating Liquid Faux Columns, an article from 2004 which I had forgotten all about. Very interesting.
• Stretchy headers are mentioned. Anice technique in which the background image is wider than it should be. Thus when the width of the design increases you see more of the background image.
• The CSS Advisor wiki is up and running. Loads of tips there. It’s a great companion to the css-discuss Wiki.

Seeing all this css goodness made me hungry for more. So I created my own three columns fixed width layout. I’m quite pleased with the result. It doesn’t need any hacks except for internet explorer older than version 7.