100% Div Width Is Not Really 100%

When I have a

with width: 100%, it is not really 100%:

testtesttesttesttest

... #div { width: 100%; background-color: red; } Now

Solution 1:

The 100% value is 100% of the parent's width or the view port. See the documentation.

Solution 2:

Width: 100%, is highly affected by its margin and margin and padding of its parent (body in your case). SO, reset them first

Something like

body {
    margin: 0;
    padding: 0;
}
#div {
  margin: 0;
  width: 100%;
  background-color: red;
}

DEMO

Solution 3:

add this to css:

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

Then it should work.

Solution 4:

100% is only 100% of the available width, based on the parent container. So if you create a DIV with width 500 pixels, then nest another DIV inside with width 100%, your 100% DIV can expand to a maximum of 500 pixels (not counting any padding or margin so you need to reset them to 0).

Solution 5:

This oughta do it (add this line to the very top of your CSS file):

* { margin: 0; padding: 0; }

Works all the time for me.

Share