Using CSS float to do layout without tables

(Version Espaņol disponible)

Two columns - a common style

This page is to test the float property in CSS, using a simple stylesheet included in the page.

main text goes here. If the style sheet works, the main text will take up the right-hand three quarters of the page,, leaving a column free on the left for the navigation text (just like having an image that sits on the right hand side of text).

The stylesheet used:

 .main { float:right ; width:75%}
 .afterwords { clear: both }
 .nav { background-color: gold ; width: 25%}

The main content (this bit) has class main, the sidebar content (next section in a linear version) has class nav, and the footer, from the horizontal rule onwards has class afterwords

and this stuff is the left hand column. If stylesheets (well, the float property) don't work, it will appear after the main content

Note that this page demonstrates some of what can be done with the relatively simple float property. For much more control, CSS provides more powerful and complex position properties.

Three columns?

In order to make this look a little neater, I have used the afterwords class on the header so it doesn't start until the entire page is clear. It is possible to get interesting effects by not clearing where there are multiple columns, but it starts to get tricky predicting them.

What is happening here?

This is something that I recently got asked about - how to put three columns in an arbitrary order in the source, while being able to control the (horizontal) position in the common CSS rendering.

So this bit of stuff is the middle column, which explains what I'm trying to do. In the raw source, the order of these columns is "what is happening", "the stylesheet", then "applying it".

Note that with the 33% being applied, it is 33% of available space - to have equal sizes for all 3 columns, you would put 50% for those inside the double block, and 33% for those outside...

The Stylesheet

.colright { float : right ;
    width : 33% }
.colleft { float : right ;
    width : 33% }
.blockright { float : right ;
    width : 66% }
.blockleft { float : left ;
    width : 66% }

Applying it

There are two div elements - and one of those contains two div elements.

The first div needs to be floated (whether it is a single column or the double-column block), and the first div inside the double block needs to be floated. Which side you float each of these two determines the order acroos the page.

Note in this example I haven't set any margins - and having a div inside another div may lead to an extra top-margin.

(This is a footer, that uses the clear property so it should cover the full width, after any floated columns)

Charles McCathieNevile $Date: 2002/02/15 17:16:00 $