Need help with the div positioning?


<head>
        <style>
            body{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div style="background:red;height:100px;margin-top:0;">Why is this not starting from top?</div>
    </body>

I have the code as above. As you can see there is only one div. But why doesn’t the div start form the top of the browser(Why is the yellow background seen at the upper-margin?) I know a way to fix using margin-top:-10px; but is that the best way?

This should be posted in the CSS forum

Try

<head>
<style>
body{
background-color: yellow;
}
</style>
</head>
<body>
<div style=“background:red;height:100px;top:0;”>Why is this not starting from top?</div>
</body>

I would also advise you to keep your css files separate.

Good luck

Tried that one as well. It is also not working.

p.s. : I didn’t know it was posted in the General Discussion Area. Any way to transfer this thread to the CSS forum

Guess the admin will do it.

That’s because you need to include a position: element to use the Top: element.

Thanks.
Now that I see the left and right of the div, the same problem persists. Is there any way to fix the left and right sides as well?

Browsers apply a default margin inside the window that is about 10px. You can remove this default margin with the following:


body {margin:0;}

negative margins are not appropriate and positioning sounds like it is unnecessary, too. body {margin:0} should do the trick.

Thanks man. That worked out well for me.

Try setting the body to margin:0; then delete the margin-top from the div. hope I helped and works out.

If you are not using a reset stylesheet, then your your css will use the browsers default margins and padding. Try this:


* {
margin: 0;
padding: 0;
}