Using CSS to Create Columns

Here is a simple technique to create as many parallel columns as you need. Unlike most solutions, this one works equally well with any number of columns as long as you can divide 100 by the number of equal columns you want to create. Otherwise you can actually use any width you like.

Start by setting up the CSS:

.column-block { display: inline-block; *display: inline; vertical-align: top; margin: 0; padding: 2px; zoom:1;}

HTML Example: Two Columns

The result:

TIP: You may be asking yourself, why 48%? The reason is to leave space between the columns.

HTML Example: Three Columns

The result:

TIP: You can also change the spacing between the columns by increasing the padding between the columns. Example:

<div class="column-block" style="width:30%;padding-right:10px;">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>