Menu
I have the following simple HTML and CSS:
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
</html>
I load this page in a browser. If the width of the browser is 400px (just an example), then I see a horizontal scroll bar in the browser screen bottom. If I move the scroll bar to the right, I can see that the background of the second div does not extend to the right.
I hope that the background color of the second div can extend from browser's left edge to the right edge (no matter what the width of the browser is).
How can I fix this?
Thanks!
786
This is because the body tag's width is the width of your browser window, and the 100% width on the second div is taking the width of the parent, which is the body tag. In your example this means the second div will only ever be 400px (the width of the browser window).
You'll have to set the width of the body tag to also be 970px in order for this to work. Setting body to 100% width won't solve it, because that will take 100% of it's parent width which is the html tag and will still be the width of the browser window.
<body style="width: 970px;">
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
EDIT: An alternative is to set the body to have display: inline-block which will force it to expand to the width of it's children:
<body style="display:inline-block">
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
You can solve like this:
<div style="width: 970px">
<div>Text area</div>
<div style="height: 20px; background-color:gray; width: 100%;"></div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
