How do I centre n columns using CSS?

Question

I currently have the following CSS for my 4 columns which might grow to 5 or 6 in the future:

<style>
.columns {
    margin: 0 auto;
    border: 1px red dotted;
    width: 90%;
}

.columns div {
    float: left;
    width: 20%;
    overflow:hidden;
    border: solid 1px;
    margin-right: 1em;
}
</style>

<div class="columns">
  <div>
    <h3>First</h3>
    <ul>
      <li>left</li>
    </ul>
  </div>
  <div>
    <h3>Second</h3>
    <ul>
      <li>mid</li>
    </ul>
  </div>
  <div>
    <h3>Third</h3>
    <ul>
      <li>right</li>
    </ul>
  </div>
  <div>
    <h3>Fourth</h3>
    <ul>
      <li>far right</li>
    </ul>
  </div>
</div>

Is it possible to use what I have to centre all 4 columns in the middle of the page?

Answer 1

You're going to have to set a static width on .columns:

.columns {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    border: 1px red dotted;
}

You'll probably want to put a clearing div at the bottom of the document (after .columns) as well:

<div style="clear: both;">&nbsp;</div>

Just to stretch out the .columns container (so your border goes the length of the columns).

UPDATE

If you're trying to strictly make a four column layout, then update .columns div as such:

.columns div {
    width: 160px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

The only real secret here is to take the total width of the container and divide by four. In the case I provide, 800/4 = 200 so each column has a total width (width + padding + margins) of 200px;

Answer 2

well, TECHNICALLY yes, but it requires you to set a width at some point, probably on your wrapper div. i don't know if it's possible to center dynamically-widthed (ie, 20% width) floated columns. if you set your wrapper div width to something, then you can set margins on your other columns to center them

Answer 3

I think I got something workable after reading all the possible answers with minimum amount of hard-coded calculated values. I've taken out the borders for simplicity:

.columns {
    position: relative;
    clear: both;
    margin: 0 auto;
    width: 900px;
}

.columns div {
    position: relative;
    float: left;
    width: 22%;
    overflow:hidden;
    margin-right: 4%;
}

.columns div.last {
    margin-right: 0;
}

Use <div class="last"> in the last column.