Question

What I did was to use margin:20% on the main div… But I don’t think it is the best way:

CSS:

.wrapper {
    background-color:#F0C;
    float:left;
    width:1000px;
    height:400px;

    margin-left:20%;
    alignment-adjust:central;
    position:absolute;
}

.maincontent {
    background-color:#3F6;
    float:left;
    width:50%;
    margin-left:30%;
}

.leftSidebar {
    background-color:#C63;
    float:left;
    width:30%;
    margin-left:-80%;
}

.rightsidebar {
    background-color:#66F;
    float:left;
    width:20%;
}

HTML

<div class="wrapper">
    <div class="maincontent">
        <!-- main content goes here -->
    </div>

    <div class="leftSidebar">
        <!-- left sidebar content goes here -->
    </div>

    <div class="rightsidebar">
        <!-- right sidebar content goes here -->
    </div>
</div>

How can I position the .wrapper to the center? Is there an easy way?

Also, what is the difference between using the left/right properties and margin-left/margin-right?

Answer 1

.wrapper {
    width:1000px;
    position:absolute;
    left:50%;
    margin-left:-500px;
}