Floatutorial - Step by step CSS float tutorial

Tutorial 8 - Liquid two column layout - all steps combined

Step 1 - Start with the semantically marked up code

To lay out a page into two columns, you need to start with the basic page structure. In this case we will use some dummy content to create a two column template. The page has been grouped into five separate divs, and each of these div's has been been given a unique ID selector. The divs are labeled; "container" (wrapped around the entire page's content), "top" (for the top banner), "leftnav" (for the smaller, left column), "content" (for the main content) and "footer" (for the footer across the bottom of the page).

Step 2 - Add width and margin to the container

To get the content to sit in from the edge of the browser window (or viewport) we need to set width and margins on the main div that wraps around the content.

In this case we will use a width of 90% so the CSS declaration used is: "width: 90%". Any width could be used, including 100%, which would force the content to the left and right edges of the viewport.

To center the div in the viewport, we apply "auto" margins to left and right. To move the div away from the top and bottom of the viewport we use a margin of 10px. These can be combined into one shorthand CSS declaration: "margin: 10px auto". This will apply a margin of 10px to the top and bottom and auto margins to the left and right.

Some browsers (particularly Win/IE5 and Win/IE5.5) do not support the auto left and right margins. However, with the addition of two simple rules, these browsers will center the containing block correctly.

Step 3 - Add color, background color and border

To add color and background color to the main div, use "background-color: #fff;" and "color: #333;".

To apply a border to the div, use "border: 1px solid gray;".

Step 4 - Add line height

To increase readability, you can increase the overall line-height of text. If it is applied to this main div, it will cascade down throughout all divs below. The rule can be written as "line-height: 130%;".

Step 5 - Styling the top banner

To style the top div, we will set a background color, padding and a border across the bottom. The three declarations will be: "padding: .5em;" to add padding to the div, "background-color: #ddd;" to add a background color and "border-bottom: 1px solid gray" to apply a border to the bottom of the div.

Step 6 - Remove margins and padding from the h1

Inside the top banner there is an H1 tag. We want the words to sit .5em in from the top and left edge of the div. Browsers add different amounts of padding above an H1, it is easiest to remove all padding and margin from this H1 and let the div provide the padding. This is achieved by using a descendant selector - "#top h1 { padding: 0; margin: 0;}".

Step 7 - Apply "float" to the leftnav

To float the left nav, we need to use the rule: "#leftnav {float: left;}". When a div is set to float, a width must also be included, so we can add another declaration: "width: 160px;".

Step 8 - Add margin and padding to the leftnav

Next, we set the margin to "0", add 1em of padding (which will move the text away from the edges of the div).

Step 9 - Setting margins to the "content" div

This next step is the most important of the entire process. The "leftnav" div has been floated, so text from the "content" div will flow down its left edge and then wrap around under it. To make the text appear as it is in a new column, we apply margin-left to the "content" div, making sure that the width is greater than the overall width of the "leftnav" div. In this case, we will use "margin-left: 200px", which will give us 40px margin between the leftnav and the main content.

We will also apply a border to the left of the "content" div. This could be a problem if the "leftnav" div is longer than the main content. If this is the case, the border can be applied to the right side of the "leftnav" div instead of the "content" div.

Step 10 - Add padding to the "content" div

To add padding to the content div use "padding: 1em;".

Step 11 - Styling the footer

To style the footer, we first need to set it to "clear: both". This is critical, as it will force the footer below any floated elements above. We then add "padding:.5em" and "margin: 0" .

Step 12 - Add color and background color to the footer

To add color and background color to the footer use the following declarations: "color: #333;" and "background-color: #ddd;".

Step 13 - Add a border to the footer

To add a border to the top of the footer use "border-top: 1px solid gray;".

Step 14 - Removing top margins

To remove the space above content in the "leftnav" and "content" divs, use the following rules: "#leftnav p { margin: 0 0 1em 0; }" and "#content h2 { margin: 0 0 .5em 0; }".

Browsers use different amounts of margin above paragraphs and headings. It is safe to remove all top margins, as long as there are bottom margins to keep the paragraphs and headings separate from elements below them.

Step 15 - Setting a maximum line length

If you want to set a maximum width on your main content, you can do this by adding a new rule : "#content { max-width: 36em; }".

Although IE browsers will ignore this rule, other standards compliant browsers will not allow the content area to go wider that 36em - keeping the line length to a comfortable width.

Finished!

« Back to main menu

Other Max Design articles and presentations
Associated with webstandardsgroup.org