Why dont my Divs span 100% of the width?

Question

I have a really dumb question to ask.

I am trying to make a div span 100% of the width of a webpage, but it doesn't reach. I want it to be dynamic (not specify the width in px) and I definitely don't want it to make a horizontal scroll bar appear.

I'm trying to make something similar to Stack Overflow's 100% page width 'alerts' which tell you when you've earned a new badge.

Screenshot of my site:

Code for the pink banner div

<div width='100%' style="padding:0px; background-color:FF0099; background-image:url('pics/pink_bg.png'); ">
  &nbsp;
</div>

Answer 1

your html body tag might have padding or margin css. you should set those to zero (0). I hope it will help.

Answer 2

Looks like you have padding on your body, which is preventing the div from expanding all the way.

Answer 3

In your css file, ensure that you don't have any padding on the body. If you don't have anything you can try adding this:

body {
    padding: 0;
    margin: 0;
}

Answer 4

Just add a css for the body to remove the padding and margin:

body {
padding: 0px;
margin: 0px;
}

Also you can apply just to left, right top and bottom margins:

body {
padding-top:0px;
padding-right:0px;
padding-bottom: 10px;
padding-left: 0px;
}

Answer 5

Actually it's quite easy. Make sure the parent container for pink banner div has 0 padding and 0 margin. In this case I'm assuming the container for your pink banner is just the body tag. Now copy the following snippet inside your head section of the page.

<style type="text/css">
    body
    {
        margin:0px;
        padding:0px;
        }
</style>

The html for your pink banner is also not correct. Replace

<div width='100%' style="padding:0px; background-color:FF0099; background-image:url('pics/pink_bg.png'); ">
  &nbsp;
</div>

with

<div style="padding:0px; margin:0px; width=100%; height:25px; background-color:#FF0099; background-image:url('pics/pink_bg.png');" >
  &nbsp;
</div>

Answer 6

Type

body {
    min-height:100%;
    height:auto;
    margin:0;
    padding:0;
}

at the beginning of your CSS file.

Answer 7

I was having the same issue, I had a great big white line on the right hand side of my page. I found the following which was a life saver:

html, body {
  width: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
}

Answer 8

A the beginning of each CSS document I always type:

html, body {
    padding: 0;
    margin: 0;
}

I never have any problems with unwanted outer margins or padding with that code.