CODEWITHSUNDEEP
csshtmlwidth
Sawyer05
Sawyer05

Reputation: 1604

Full width page divs

I'm designing a website, I'm trying to get a simple coloured div across the top of the browser, I've tried simply using:

div{
    width:100%;
}

but noticed there's white space on either side and on top of the screen.

I'm looking for something similar to the blue header on Facebook that fills the entire screen.

Any suggestions how to accomplish this?

Upvotes: 0

Views: 8078

Answers (3)

Apprentice
Apprentice

Reputation: 701

did the body have margin?

Try adding:

body {
 margin: 0;
 padding: 0;
}

or use a reset for styles like: http://necolas.github.io/normalize.css/

Upvotes: 2

akash4eva
akash4eva

Reputation: 861

There is always some margin and padding in all browsers for the body. So, try doing the following and recheck the results:-

*{margin: 0; padding: 0;}

The above code will remove all the extra margins and paddings from all the tags!

You should use normalize.css for a kick-start designing of your applications though.

Upvotes: 5

Eli
Eli

Reputation: 14827

It's because of default styles of your browser, use this to reset it:

* {
    margin: 0;
    padding: 0;
}

Demo

Besides that, I'd suggest you take a look at css reset which give you a set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

Upvotes: 1

Related Questions