How to Create Columns with CSS Float

Don't be scared by the thought of giving up layout tables. CSS layout columns can be created reliably with the float property.

Difficulty: Moderate

Instructions

Things You'll Need:

• A basic knowledge of HTML and CSS
• A web page you want to lay out in two columns

Use Divs to Create Columns

1. There are several steps involved in getting to the columns you see in the introductory image at the beginning of the article. The first is to create a container div that will hold everything in your layout. This will help keep things like headers and footers in line with everything else. Here's an example CSS #container rule:
   
   #container {
   width: 700px;
   }
   
   The width does not have to be in pixels. It can be in ems or percentages. You can include background color, borders and many other CSS properties in this rule.

2. Within the HTML container div, insert a div for the content column and a div for the sidebar column.
   
   It improves accessibility to have the content come first in the document. To make it appear as the left column, the next step is to set a width for the column and set it to float to the left margin (of the container).
   
   #content {
   width: 65%;
   float: left;
   }
   
   The width can be in pixels, ems or percentages. Make the content about two-thirds of the width of the container, leaving about one-third of the width for the sidebar.

3. To position the sidebar div, you give it a width and a very large left margin.
   
   #sidebar {
   width: 30%;
   margin-left: 70%;
   }
   
   You can use pixels, ems or percentages to set the width. Choose a unit that matches what you choose for the container and the content. In this example, the sidebar wraps around the right of the content, which is floated left. Leave enough margin on the left side of the sidebar to allow room for the content div.
   
   Because the sidebar is constrained to a width of 30 percent and has a wide margin-left setting, the sidebar will not wrap under the floated contents, even if it happens to be the longest column.

Tips & Warnings

• If you want the content div on the right, use float:right. Then adapt accordingly to margin-right on the sidebar div.
• Borders, background images or background color and many other CSS properties can be used to make each column visually distinct in your page layout.
• If you want to include a footer div inside the container, be sure to use the clear: both rule to bring it down below the floated content div and place it at the bottom of the container.