CODEWITHSUNDEEP
htmlcss
RSM
RSM

Reputation: 15108

css margin left and right issues

i want to get the bit at the top of some websites that really thin and right at the top. which looks like facebooks blue banner at the top of their website.

the code i have tried for the above is: 

<div style="height:20px; background-color:grey; margin-top:-10px; "></div>

and it works apart from theres just a little bit of white space at the right and left sides of the grey.

Does anyone know what i am doing wrong?

Upvotes: 0

Views: 120

Answers (2)

Bojangles
Bojangles

Reputation: 101483

It sounds like you haven't cleared the padding/margin on the body element. Give this a go:

html, body
{
    padding: 0px;
    margin: 0px;
    width: 100%;
}

Also, give your div a width of 100%:

div
{
    width: 100%;
}

I've probably gone a bit overboard with the CSS, but it will make sure everything works.

Additionally, make sure there is an HTML doctype defined - this can cause some other problems later one, such as :hover not working.

Upvotes: 2

James Allardice
James Allardice

Reputation: 165971

You need to use margin:0 on the html and body tags. This will allow your div to take up all the available horizontal space, and put it right at the top instead of having a small space.

Upvotes: 2

Related Questions