Question

What’s the best approach to creating a div that will take the full width of the screen, no matter what resolution? I’m trying to add a ‘top’ bar and bottom ‘footer’ area with divs that have a black background and styled border that I’d create with a small image and repeat. For some reason my attempts are leading to small spaces on the top and sides of the div?

My markup is similar to:

<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. Don’t use top: 0; for other div except top, use left: 0; for other div for eliminate the left space.

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