CODEWITHSUNDEEP
css
Grunge Freak
Grunge Freak

Reputation: 1019

CSS Not Centering Container

I have a container div. Width: 80%, margin-left: 10% and margin-right 10%. The problem is, the container is displaying to the left in all the browsers I check. If I change the value of margin-left to 20%, it looks ok.

I will supply code if necessary but is there anything obviously wrong here? Isn't 80 with a margin of 10 on each side correct to center a div?

GF

Upvotes: 1

Views: 6110

Answers (3)

Guffa
Guffa

Reputation: 700382

I tried your setup, and it works just fine.

You should check the spelling and syntax of your CSS, there is probably some error that keeps it from working. In Firefox you can open up the error console and reload your page, and it will tell you about any CSS errors.

You can also use margin-left: auto; margin-right: auto; to center the element.

Here is the code of the page that I used to test the CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<title>Test</title>
<style type="text/css">
div { width: 80%; margin-left: 10%; margin-right: 10%; background: #ccc; }
</style>
</head>
<body>
<div>asdf</div>
</body>
</html>

Upvotes: 2

Victor Lam
Victor Lam

Reputation: 3710

try set theese:

<html>
<head>
    <style>
        .container {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            width: 80%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        Testing page
    </div>
</body>
</html>

Upvotes: 1

Michele
Michele

Reputation: 6131

has the parent element of the div a specified witdh?

Try 

width: 100%;

for the parent Element

Upvotes: 1

Related Questions