CODEWITHSUNDEEP
htmlcss
Dmitry Makovetskiyd
Dmitry Makovetskiyd

Reputation: 7053

aligning an absolute div to the center

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?

Upvotes: 0

Views: 237

Answers (2)

ptriek
ptriek

Reputation: 9276

My answer would be: skip the absolute positioning, and use margin:0 auto; to center your content (no margin on top and bottom, and automatic margin left and right).

.wrapper
{
    background-color:#F0C;
    width:1000px;
    height:400px;
    margin:0 auto;
}

Upvotes: 2

Purag
Purag

Reputation: 17061

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

Upvotes: 9

Related Questions