0

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?

GMA
  • 5,816
  • 6
  • 51
  • 80

2 Answers2

5

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.

keaukraine
  • 5,315
  • 29
  • 54
0

You can use this in your CSS to reset:

* {
  margin-right: 0 !important;
}

However if you are using some framework that uses CSS, it might cause an issue.

Fritz
  • 343
  • 1
  • 10