Question

I’m looking for a way to display 3 columns of content. I’ve found a way to display wrap-around columns, but I don’t want that for this page. I’m looking for a way to say

<column>
<!-- content -->
</column>

3 times, and have 3 columns displayed beside each other. The best example I have offhand is The Verge (http://www.theverge.com/). What is the best way to do this?

Answer 1

I would suggest you to either use <table> or CSS.

CSS is preferred for being more flexible. An example would be:

<!-- of course, you should move the inline CSS style to your stylesheet -->
<!-- main container, width = 70% of page, centered -->
<div id="contentBox" style="margin:0px auto; width:70%">

 <!-- columns divs, float left, no margin so there is no space between column, width=1/3 -->
    <div id="column1" style="float:left; margin:0; width:33%;">
     CONTENT
    </div>

    <div id="column2" style="float:left; margin:0;width:33%;">
     CONTENT
    </div>

    <div id="column3" style="float:left; margin:0;width:33%">
     CONTENT
    </div>
</div>

jsFiddle: http://jsfiddle.net/ndhqM/

Using float:left would make 3 columns stick to each other, coming in from left inside the centered div “content box”.