100% width divs not spanning entire width of the browser in webkit

Question

I\'m having a hard time with what I thought would be a dead simple issue.

I\'m trying to create a div that spans 100% of the width of a browser window. The div is f

Answer 1

I have fixed mine by

body
{
background-color:#ffffdffffd;
width:100%;
margin:0px;
}

Answer 2

I fixed by using display: table-cell

#field {
    width: 100%;
    background: #009900;
    height: 100px;
    margin: 0;
    margin-bottom: 25px;
    padding: 0;
    display: table;
}    

.singleyard {
    width: 1%;
    margin: 0;
    padding: 0;
    background: #090;
    display: table-cell;
}

.fiveyards {
    width: 5%;
    margin: 0;
    padding: 0;
    display: table-cell;
}

Answer 3

I have fixed mine by adding

html, body
{
  width: 100%;
  margin: 0px;
}

happy coding!!!

Answer 4

Only thing I can think of is to add:

html, body
{
    width: 100%;
}

Just to make sure safari knows the parent container of field is also 100%;

Another thing to try is to add:

html { overflow-y: scroll; }

That should force a side scrollbar, even if it's grayed out. I wonder if some webkit rendering temporarily flashes a scrollbar, but fails to give the space back. Any of that work?

Answer 5

I had the same problem, this is what I discovered: somewhere in your CSS you have another div that has a width of 100% and ALSO has padding. Since the padding value is added to the width, the value of that div becomes greater than 100%. The solution is to make sure not to use padding on any div that is set to 100% width. If you need padding, try adding the padding to the element inside the div instead.

Answer 6

adding min-width: 100% seems to do the trick