CODEWITHSUNDEEP
htmlcss
Henry-95
Henry-95

Reputation: 719

3 column divs aren't centered exactly

I have centred 3 divs, but the grouping is off-centre by about 10-20 pixels. Why is this, and how do I fix it? I am using Google Chrome.

Here's the code: jsbin

Or you can view the code below:
HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <div id="container">
    <div class="csect"></div>
    <div class="csect"></div>
    <div class="csect"></div>

    </div>
</body>
</html>

CSS:

#container
{
    width: 800px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.csect
{
    display: inline;
    float: left;
    margin-left: 25px;
    margin-right: 25px;
    background-color: #E0E0E0;
    width: 200px;
    height: 200px;

}

Thanks in advance.

Upvotes: 0

Views: 102

Answers (7)

Michael
Michael

Reputation: 477

Not exactly the answer you are looking for, but the one the will most help you:

  • Install firebug in firefox to understand why there is this difference.
  • The problem you are having, someone else already had. You dont need to reinvent the wheel. Take a loot at Twitter Bootstrap or 960.gs

Now the answer you want:

Your #container has 800px. The .csect's have 25px + 200px + 25px = 250px. 250 x 3 = 750px. You are missing 50px :) If you change the #container to 750px or add some more margin to the first csect, you are going to have it centered.

Upvotes: 3

John
John

Reputation: 1296

Try this:

.csect {
    background-color: #E0E0E0;
    display: inline-block;
    height: 200px;
    margin-left: 25px;
    margin-right: 25px;
    width: 200px;
}

Upvotes: 1

Death
Death

Reputation: 2017

Your issue is in the width of your container.

(25*2)+200 = 250

250*3 = 750, so you've got a gap of 50px to the right, where they're aligned left.

Simply change the container width: 800px; to width: 750px; and it'll be fine.

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Try to use display: inline-block with text-align: center on container

Example http://jsbin.com/ibufoc/1/edit

Upvotes: 1

Treb
Treb

Reputation: 20271

They are not centred exactly because you didn't centre them exactly.

The total width of your container is 800 px. Each of the three csect elements is 200 px + 2 x 25 px wide, so the total width of your three elements is 750 px.

Set the container width to 750 px, and they should be exactly in the centre.

Upvotes: 1

Simon Arnold
Simon Arnold

Reputation: 16177

250px x 3 = 750px in a 800px container.
So of course, it's not centered.

Upvotes: 2

Chris S.
Chris S.

Reputation: 1257

I usually set the margin-left value to the half px of the div width in order to have it look the same in all browsers.

Upvotes: 1

Related Questions