The Secret to Layout: Float and Clear

As we discussed in class 2 (September 27), the secret to creating layouts with CSS depends upon the proper use of the properties "float" and "clear".

For example, say you were trying to code a page with the following layout:

The outer box is meant to represent the outline of the page. The layout is basically a grid: two rows and two columns.

The Question: How do you create that in XHTML and CSS?

The Answer: Using XHTML div tags, and the CSS properties float and clear.

Here is another version of the same diagram, but this one indicates how we would break the first diagram down into blocks of code:

First, a quick explanation of this diagram:

To make things obvious, the boxes in the diagram each show their respective CSS "selectors". In other words, the box titled "div#container" indicates that this is an xhtml div element with an id="container".

As you know, a tag like <div id="container" >

allows us to use a style sheet that is associated only with that id. Similarly, a tag like <div class="column" > allows us to use a style sheet that is associated with all elements that have class="column".

The dotted line around the "br.clear" box indicates that it will actually be invisible on the page.

So our XHTML will look something like this:

<div id="container">

<div class="column"></div>
<div class="column"></div>
<br class="clear" />

<div class="column"></div>
<div class="column"></div>
<br class="clear" />

</div>

And our CSS will look something like this:

#container {
width: 644px; /* the sum of the container padding, plus the widths of all the boxes inside the container, plus all their borders and margins */
/* do not specify the height of the container, this makes it somewhat flexible */
margin: 0 auto; /*centers the div on the page */
border: 1px solid red;
padding: 10px;
}

.column {
float: left; /* allows all divs with clas="column" to stack up horizontally */
width: 300px;
height: 300px;
border: 1px solid orange;
margin: 10px;
}

.clear {
clear: both; /* marks the end of a row. remember, every time you float, you must clear! */
height: 0px;
}

You can see what this looks like here