# Div stretch to 100% widdth **URL:** \ **Category:** web dev\ **Created:** [September 9, 2004, 11:04pm UTC](https://forum.kirupa.com/t/div-stretch-to-100-widdth/63784 "2004-09-09T23:04:01Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![Calydon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/calydon/32/682_2.png) [@Calydon](https://forum.kirupa.com/u/Calydon)\ **Post date:** [September 9, 2004, 11:04pm UTC](https://forum.kirupa.com/t/div-stretch-to-100-widdth/63784/1 "2004-09-09T23:04:01Z")
I can’t believe such a simple thing is causing me to lose sleep! 😜 I just want a div layer that stretches the width of a page without scrollbars! That’s all! Setting width: 100%; sure doesn’t work. Naturally 😛 There are small gaps to the left and right of my layout. I tried specifying 0 for any type of margin, padding, or border, but still, no dice. Anyway, I tried setting margin:left and right, which is partial success, because now the left side is reaching all the way to the edge of the browser. But the right side continues to elude me. Anyway, here is the layout: [http://www.mackendrick.com/brunner/](http://www.mackendrick.com/brunner/) I want the orange stripes to go from one end to the other with no scrollbars. Here is the content of my CSS file ```auto body { background-attachment: fixed; background-image: url(brunner_bg.jpg); background-repeat: no-repeat; background-position: center center; background-color: #000000; overflow:-moz-scrollbars-none; overflow:-ie-scrollbars-none; padding: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border: none; border-width: 0px; } .mainText { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; font-weight: normal; color: #FDA44A; text-align: left; text-indent: 5px; display: block; } ``` ---
**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\ **Post date:** [September 10, 2004, 2:12am UTC](https://forum.kirupa.com/t/div-stretch-to-100-widdth/63784/2 "2004-09-10T02:12:16Z")
Just by looking at it… the coding in your site is really messy… and I’d just assume that it’s not your CSS but the styling done in your body on your DIVs. I would clean that up first and do it all in your CSS file. ---
**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\ **Post date:** [September 10, 2004, 4:19am UTC](https://forum.kirupa.com/t/div-stretch-to-100-widdth/63784/3 "2004-09-10T04:19:18Z")
oooooo K. Fine. Here is a very simple test. Just one layer, with a bg image. It validates as Transitional HTML 4 [http://validator.w3.org/check?uri=www.mackendrick.com%2Fbrunner%2Ftest.html](http://validator.w3.org/check?uri=www.mackendrick.com%2Fbrunner%2Ftest.html) and the CSS is all good: [http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.mackendrick.com%2Fbrunner%2Ftest.html&usermedium=all](http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.mackendrick.com%2Fbrunner%2Ftest.html&usermedium=all) Now - how do I make this layer stretch to touch the left and right sides of the browser -with no horizontal scrollbars? here is the minimal CSS attached to the HTML: ```auto #Layer1 { position:absolute; height:42px; width:100%; z-index:1; background-image: url(images/index_02.gif); border: none #000000; top: 200px; left: 0px; } ``` ---
**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\ **Post date:** [September 10, 2004, 6:26am UTC](https://forum.kirupa.com/t/div-stretch-to-100-widdth/63784/4 "2004-09-10T06:26:28Z")
to get rid of your scrollbars… in your body tag in your CSS put overflow:none ---
**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\ **Post date:** [September 11, 2004, 11:43am UTC](https://forum.kirupa.com/t/div-stretch-to-100-widdth/63784/5 "2004-09-11T11:43:28Z")
Ok, now that I’ve done that (thank you Simplistik) the scrollbars do go away, but that \*\*\*\*able gap on the right side continues to dog me. If I extend the layer to 110% width - it will go all the way, but now the scrollbars show up again! Hasn’t anyone in the history of the internet made a div layer stretch from left to right? I can’t even find anything on Google about this… ---
**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\ **Post date:** [September 11, 2004, 12:44pm UTC](https://forum.kirupa.com/t/div-stretch-to-100-widdth/63784/6 "2004-09-11T12:44:51Z")
Width % is based on available parent width. if placed in the body tag, the div will only be able to match the width of the available width within the body. This is decided by the size of that parent and its margin and padding settings. By default the body tag has no padding, but it does have margins. Because of this, the div can only stretch to bodywidth-margins. Set your body margins to 0 and your div will fit to the screen. margin-left:0; margin-right:0; ---
**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\ **Post date:** [September 11, 2004, 1:46pm UTC](https://forum.kirupa.com/t/div-stretch-to-100-widdth/63784/7 "2004-09-11T13:46:01Z")
in the body tag, you can make the width 100%, sometimes that will work as a parent.