100% DIV width is not really 100%

user_670979 0
Viewed 96073

When I have a <div> with width: 100%, it is not really 100%:

<div id="div">testtesttesttesttest</div>

...

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

Now when you resize the window, so there is a horizontal scrollbar, and you scroll to the right, then the background is vanished. How can I remain the background in this case?

Here you can see the problem in action: http://beta.ovoweb.net/?i=3

Now when you resize the window and scroll to the right, you can't see the background anymore. How to fix this?

scroll css width html
9 Answers

In my case, the div tag did not take up 100% of its parent tag because the div had a display of "inline." Changing it to "inline-block" fixed that problem.

user_4880630

check if you have this code in the div or it parent:

 #div  {
    max-width: 300px;
}

or

 #div  {
    max-width: 50%;
}

This cause the width not to be 100% of the page. Just remove it.

user_100538350

If you have row included in your class then it sometimes causes problems, remove it and add it inside a new div

user_150612840
Related