Make your own free website on Tripod.com

Cascaded Style Sheets

PI Vermaes   verpister@gmail.com     To: | Home | TOC Gray | Bottom |

Drie kolommen met div's, zonder gebruik van een table:

div.left {float: left; clear: left;}
div.middle {float: left; clear: none;}
div.right {float: left; clear: right;}

Emil Stenström:
One of the least followed parts of CSS is the very idea behind it, the idea of separation of content and design. The idea here is that all sites contain two major parts, the content: all your articles, text and photos and the design: rounded corners, colors and effects. Usually those two are made in different parts of a webpage's lifetime. The design is determined at the beginning and then you start filling it with content and keep the design fixed. So if you just want to add content to your site you don't want to be forced to mess around with the design, would you? The same thing is true the other way around, if you decide on a redesign, why should you have mess around with the content, making sure it fits in the new layout?

There are basically two ways to make 2 column layouts with floats. Either you float all the columns (float-float) or you float all but the last one (float-margin). The former method makes it easier to work with clearing inside of the second columns though, so if you are going for a complex layout float-float might be better. The latter has the advantage that you don't have to set a width on the last column. It will fill whatever space is availiable. My favourite is still float-margin though, the automatically expanding second column makes sure the the full width is used no matter what.

If you want to put something below a float you need to clear it. Clearing moves the element down until it is below any floats, exactly where we want the footer. So both navigation and content are floated and given a width to match the 600 pixels wide header, and the footer is cleared.


Inline elements (no line break before or after the element)