How to center two columns using CSS?

Question

I'm trying to center two columns on my website but there are some problems. The result of every change is left position (see picture). What am I doing wrong? Here's my CSS:

body {
    background - image: url("../img/gray.png");
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: #cc0000;
    text - align: center;
}

#wrapper {
    margin: 100px;
    width: 1280px;
}

#leftcolumn {
    float: left;
    background - image: url("../img/gray.png");
    margin: 10px 0px 10px 0px;
    padding: 10px;
    height: 682px;
    width: 460px;
}

#rightcolumn {
    float: left;
    color: #333;
    border: 1px solid # ccc;
    background: #F2F2E6;
    margin: 10px 0px 10px 0px;
    padding: 10px;
    height: 500px;
    width: 439px;
    display: inline;
    position: relative;
}

Thanks

Answer 1

Since the two columns' width is less than the width of the wrapper (i.e. 959px vs 1280px), you'll need to place the two columns inside a fixed width container:

<div id="wrapper">
    <div id="column_container">
        <div id="column1"></div>
        <div id="column2"></div>
    </div>
</div>

And then do something like:

#column_container {
    width: 959px;
    margin: 0 auto;
}

Answer 2

Without seeing it live, something like this should work:

#wrapper { 
   width: 1280px;
   margin:100px auto ;
}

But as has been mentioned, this will only center #wrapper. The columns don't fill the entire 1280 width so they are still left aligned in #wrapper.