Geek asks and answers

How to center two columns using CSS?

I am trying to center two columns on my site, but there are some problems. The result of each change is the left position (see picture ). What am I doing wrong? Here is 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;
}

thank

+5
source share
2 answers

Since the width of the two columns is less than the width of the wrapper (i.e. 959px versus 1280px), you need to put two columns in a container with a fixed width:

<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;
}
+7
source

Without seeing this live, something like this should work:

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

But, as already mentioned, it will only be the center #wrapper. Columns do not fill the entire width of 1280, so they are still aligned in #wrapper.

+2
source

More articles:


All Articles