Tutorial 21: CSS Floats, Part II
|
| ||||
| ||||
|
|
Floating over nothing
Now let's look at acme.css, the style sheet that is linked to this document.
/* Looks */ BODY { background-color: #FFFFFF; color: #000000; } A:link { color: #8B7CFF; } A:visited { color: #483ACE; } A:active { color: #CC0000; } H1 { font: bold italic large Arial, Helvetica, sans-serif; } H2 { font: italic large Arial, Helvetica, sans-serif; } #intro { border: medium solid #ACA250; } #header P { border: medium solid #ACA250; text-align: center; } #footer P { font-size: smaller; text-align: right; } /* Layout */ #main { margin-left: 40%; } #intro { width: 35%; float: left; } #footer { clear: left; }
What we've done here is shrunk intro to 40% of the containing block's size (the containing block in this case is the DIV called body), and floated it to the left. This means that the elements following intro will be laid out as if it wasn't there, but their inline contents will be moved to the right so that they don't overlap with the float.
Now, if we give main a left margin of 40%, the elements in main will be displayed to the right of intro, creating what is effectively two columns.
You can view this example here. The result looks something like the following images on conforming browsers:
Multi-column layout using floats on Mozilla. Impeccable. [Full-sized image]
Multi-column layout using floats on Internet Explorer 5.0. Almost impeccable (can you spot the error?). [Full-sized image]
