The container div is used to encapsulate the columns and can be used to set the overall size of both columns. Two div elements are used for the left and right content. We now need to add styles to the elements, this is easy because we gave an id to each element. The spacer is there to make sure that the content around the columns does not interfere with it.

Note that the columns have a set width and if the browser window is smaller than both columns one will appear underneath the other. This can be changed by giving a width to the container element.

#container
{
width: 520px;
}

Fluid columns

The columns used above has a fixed size specified in pixels, this size can also be specified as a percentage of the screen width so that the columns resize to match the size of the browser window. The HTML is the same as before but the width is specified differently.