2 Column Layout

2 columns layouts are made by using 2 divs, which float, and whos widths when added together are less than the available space.

Step 1

Insert 2 divs into your html page, and add some content so you can see them easily.

<body>
<div>This is left column</div>
<div>This is right column</div>
</body>

Step 2

Next, use the id attribute to name the divs. We need to do this so that we can reference each div from the style sheet. Remember, on any one page, each id must be unique.

<body>
<div id="column1">This is left column</div>
<div id="column2">This is right column</div>
</body>

Step 3

Now it's time for the CSS styles. To reference an id in the html, we use a # in the css. Each column is floated, but in different directions. The widths of the two columns are less than 100%, so they line up side by side. The background colours are there so that you can see the divs' positions easily.

#column1 {
float: left;
width: 30%;
background: #99CCFF;
}
#column2 {
float: right;
width: 69%;
background: #FFFFCC;
}

Step 4

If you haven't already done it, add the link from the <head> of the HTML page to the CSS Style sheet.

Step 5

View your page in a browser. It should look like this:

Adding additional content to each div will cause each column to grow in height. This is the basic structure of many websites, although many sites use a three column layout.