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

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

The result:

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

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

HTML Example: Three Columns

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

The result:

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

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>


Leave a Reply

Your email address will not be published. Required fields are marked *