CODEWITHSUNDEEP
csshtmlwidth
Adjam
Adjam

Reputation: 640

Why dont my Divs span 100% of the width?

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: Screenshot of my site. Note how the pink banner and green banner leave gaps where the sky blue background is shown.

Code for the pink banner div

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

Upvotes: 6

Views: 31507

Answers (8)

Usman
Usman

Reputation: 163

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>

Upvotes: 1

jnomada
jnomada

Reputation: 11

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;
}

Upvotes: 1

Perocat
Perocat

Reputation: 1521

Type 

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

at the beginning of your CSS file.

Upvotes: 1

Palmer
Palmer

Reputation: 173

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.

Upvotes: 0

vincentieo
vincentieo

Reputation: 938

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;
}

Upvotes: 1

dpcasady
dpcasady

Reputation: 1846

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;
}

Upvotes: 2

sarwar026
sarwar026

Reputation: 3821

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

Upvotes: 9

David Nguyen
David Nguyen

Reputation: 8528

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

Upvotes: 4

Related Questions