CODEWITHSUNDEEP
htmlcss
Fastkowy
Fastkowy

Reputation: 1295

How to center two columns using CSS?

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

Upvotes: 8

Views: 42997

Answers (2)

BenM
BenM

Reputation: 53198

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

Upvotes: 9

gotohales
gotohales

Reputation: 3695

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.

Upvotes: 3

Related Questions