CODEWITHSUNDEEP
htmlcss
user1472065
user1472065

Reputation: 115

Using margin: 0 auto, Div still not centered

I am trying to center a container div on my background which I usually have no problem with at all. I normally just add the css "margin: 0 auto;". Well for this website, I'm not sure why, it may be the MIME type or the CSS3 or something else... But the div will not center.

Here is my HTML...

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HEAD>
<TITLE>title</TITLE>
<link rel="stylesheet" type="text/css" href="style.css" />

    <BODY>
        <div class="container">
        </div>
    </BODY>
</HTML>

And here is my CSS...

body {
    background-image: linear-gradient(left top, #000000 30%, #0000FF 90%);
    background-image: -o-linear-gradient(left top, #000000 30%, #0000FF 90%);
    background-image: -moz-linear-gradient(left top, #000000 30%, #0000FF 90%);
    background-image: -webkit-linear-gradient(left top, #000000 30%, #0000FF 90%);
    background-image: -ms-linear-gradient(left top, #000000 30%, #0000FF 90%);
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop (0.3, #000000), color-stop(0.9, #0000FF));
    height: 100%;
    width: 100%;
    margin: 0;
    width: 0;
}

.container 
{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 940px;
    z-index: 0;
    width: 940px;
    top: -10px;
    height: 80%;
    background-color: #F0F8FF;
    border-radius: 0px 0px 35px 35px; 
    -moz-border-radius: 0px 0px 35px 35px; 
    -webkit-border-radius: 0px 0px 35px 35px; 
    border: 10px solid #696969;
}

And please ignore the terrible formatting on my CSS. That is not the way it is in the file, that is just mistakes copying it over. Also the browser I am initially testing in is Chrome.

Upvotes: 1

Views: 1016

Answers (2)

Cristi Pufu
Cristi Pufu

Reputation: 9095

Remove the width: 0; from body in css rule, like this:

body {
    background-image: linear-gradient(left top, #000000 30%, #0000FF 90%);
    background-image: -o-linear-gradient(left top, #000000 30%, #0000FF 90%);
    background-image: -moz-linear-gradient(left top, #000000 30%, #0000FF 90%);
    background-image: -webkit-linear-gradient(left top, #000000 30%, #0000FF 90%);
    background-image: -ms-linear-gradient(left top, #000000 30%, #0000FF 90%);
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop (0.3, #000000), color-stop(0.9, #0000FF));
    height: 100%;
    width: 100%;
    margin: 0;
}

Upvotes: 5

filype
filype

Reputation: 8380

You have not a HTML tag to start the document, sure that might create a problem

Upvotes: 0

Related Questions