Best Way to do Columns in HTML/CSS

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".