Full Screen Width Area

Question

What is the best approach to creating a div that will occupy the entire width of the screen, regardless of resolution? I am trying to add a top bar and a lower footer area with divs that have a black background and a stylized border that I would create with a small image and repeat. For some reason, my attempts lead to small spaces on the top and sides of the div?

My markup is like:

<div id="top"> Top bar stuff </div> <div id="pagewrap"> All the page content </div> 

CSS

 #top { width: 100%; margin: 0; padding: 0; background-color:#000 

Answer 1

Just use top:0; and left: 0; , and you can also eliminate padding: 0 . Do not use top: 0; for a div other than the top, use left: 0; for another div to eliminate left space.

 #top { width: 100%; margin: 0; padding: 0; background-color:#000 top: 0; left: 0; } 

Answer 2

This is usually a body tag that has some paddings and / or fields. Try adding:

 body { padding: 0; margin: 0; } 

If this works, you can consider using a normalization stylesheet that fixes this type of problem, as well as many other related types of problems.

Answer 3

Make sure body has padding and margin value 0 in CSS.