Search code examples
csshtmlviewport

Can't get a div background colour to fill full width of viewport

I'm trying to fill a certain part of the page with a background color. I want the background colour to fill the entire width of the viewport, but have a fixed height. Here's what I've tried:

<div id="theDiv" style="width: 100%; height:200px; background-color:black;">
    Blah blah blah, content goes here.
</div>

But no matter what I try, this always give me a small white margin at either side of the div, between the edge of the div and the boundaries of the viewport. How can I make the div fill the entire width of the viewport?

I don't want to change the bg color of the <body> tag as I only need to fill a certain vertical section of the screen.

The only thing I can think of that I haven't tried yet is to create a 1px wide bg image and set it to x-repeat... is there not a more elegant solution than this?

Solution

  • Try to set width of body and html to 100% and paddings and margins to 0.

    Also you may want to apply CSS reset rules to the beginning of your style sheet. You can use this CSS reset http://meyerweb.com/eric/tools/css/reset/ or google for another one.