Div stretch to 100% widdth

programming web dev
1

I can’t believe such a simple thing is causing me to lose sleep! :stuck_out_tongue_winking_eye:

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 :stuck_out_tongue:
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/

I want the orange stripes to go from one end to the other with no scrollbars.
Here is the content of my CSS file

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;
}
2

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.

3

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
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

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:

 #Layer1 { 
position:absolute; 
height:42px;
width:100%; 
z-index:1; 
background-image: url(images/index_02.gif); 
border: none #000000; 
top: 200px;
left: 0px;
}
4

to get rid of your scrollbars… in your body tag in your CSS put overflow:none

5

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…

6

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;

7

in the body tag, you can make the width 100%, sometimes that will work as a parent.