Creating a multicolumn layout

Floats were designed to flow text around an image. However, floats are also the most common way of building a multicolumn layout. In this section, we'll look at how to float elements next to each other in order to create a page layout.

So, what we currently have in the HTML in the secondary section are three div tags with a class of column:

The following screenshot illustrates the final site. This is what we're aiming for. We want three equal columns with a small gutter or margin in between:

In our current site, columns are stacked on top of one another. Right now, we have simple rows, so we want to fix that using floats. In our final site, we want to have everything centered in the middle of the page, but right now, all of our content goes from one edge of the browser window to pretty much the opposite edge of the browser window:

Let's fix this by centering our div tags.