CODEWITHSUNDEEP
csshtmlviewport
GMA
GMA

Reputation: 6096

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?

Upvotes: 0

Views: 5841

Answers (2)

Fritz
Fritz

Reputation: 411

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.

Upvotes: 0

keaukraine
keaukraine

Reputation: 5364

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.

Upvotes: 5

Related Questions