Matt 0

This is something that's been concerning me for years, and I've never found a good method.

You can use tables to split the page into two columns, but we all hate tables so what's the best way of doing it with CSS?

I've tried using float, but that just causes problems with width etc.

4 answers

GaVrA 5

Best thing is to use float. At least for me. Never had any problems with it. Just need to have parent with width of floated childrens width from one row combined and thats pretty much it. :)

For example, if you have 2 columns, 200px each, just put 400px to their container. If you want 3 columns, just put then container to be 600px.

If you have some content after foated elements put one element with clear:both; styling(after those floated elements).

Answered almost 9 years ago by GaVrA

When using CSS to create columns, it's best to use percentages. Percentages tend to break less often than pixel-sizing because of bad math on the designers end (as well as bad rendering on the browsers end). If you're container is at a set width, then you should have no problem replicating the exact size you want. And yes, percentages can have fractions (such as 50.5%, and 64.56%).

Remember to clear your floats whenever necessary!

div#container {
 width: 960px;

div.column {
 padding: 1%;
 width: 48%;

<div id="container">
     <div class="column"> Hello! </div>
     <div class="column"> Goodbye! </div>

You can adjust the size accordingly; if you want 5 columns, then the width of div.column cannot exceed 20%; if you want 10 columns, 10%; 3 columns, 33.3%, etc etc.

Answered almost 9 years ago by Vinny Burgh

Use CSS Columns: where supported, drop down to a single column in legacy browsers.

Answered almost 9 years ago by Rich Bradshaw

Use floats, but you could combine it with some positioning as well (I know I do to keep my semantics and sensible page flow intact).


<div id="columns">
   <div class="column first"></div>
   <div class="column second"></div>


#columns {
   overflow: hidden; /* contained floats fixed, makes the container wrap the to floated columns */

.column {width: 48%;}
.column.first {float: left;}
.column.second {float: right;}

We float the columns left AND right to avoid stacking them on each other (to make it a little more float drop safe). The gutter between them is the left over percentage (4%).

If you want to switch the order of the two columns without changing the source (ie if you have a #primary div followed by a #secondary and doesn't want to mess with the well structured soruce code flow) you can use relative positioning, like so:

     position: relative;
     left: [width of the column + gutter];
.column.second {
     position: relative;
     left: -[width of the column + gutter];
Answered almost 9 years ago by Jens Hedqvist