3 column design

3-col-design.md

3 Column Design

Just a fast guide to applying a 3 column layout using HTML and CSS3.

the <span> method:

This is my personal favorite..

• Use one <div> to contain the 3 columns

• Use a <span> for each column

HTML

<div class="row">
    <span class="col-third">Col</span>
    <span class="col-third">Col</span>
    <span class="col-third">Col</span>
</div>

• Define a width for each column to fit (eg: 33%)

• Set display to inline-block

CSS

col-third {
    display: inline-block;
    width: 33%;
}

Naturally, <span> display is set to inline; while <div> display is set to block. Also, you don’t have to use <span> tags. Using nested <div> tags will work just fine, as long as the styling is correct.

the float method:

• Make sure the container column elements are display: block (natural for <div>)

• Use <div> for columns instead of <span> (because they are naturally display:block

HTML

<div class="row">
    <div class="col-third">col</div>
    <div class="col-third">col</div>
    <div class="col-third">col</div>
</div>

CSS:

col-third {
    float:left;
    width:33%;
}

the selector method:

Using the CSS3 > selector, you can assign styling to specific children.

HTML:

<div>
    <span>col</span>
    <span>col</span>
    <span>col</span>
</div>

CSS:

div > span {
    width:33%;
    display:inline-block;
}

The selector method will only grab the “top level” children found underneath the div. While this method works, I would recommend adding class names and using those instead. The purpose here is to just show that it is yet another way to do it.

the responsive method:

Naturally there is some responsiveness happening already because the use of width:33% Percentages will respond, but we might not always want the same amount of columns on smaller devices. The easiest way is to use Twitter Bootstrap - take a look to learn more.