width 100% padding 10px problem

[samoht]

hello all,

I have a div that is styled to be width:100%; and padding-left:10px; for some reason this forces the div to extend beyond my window 10px on the right.

how to I fix this so the contents of my div are padded on the left edge and the div fills the window - but only the window (horizontal scroll bar is not what I want! :) )

thanks for the help,

[WebJoel]

total width = "width" + "padding" + "margin(s)".

Better to use "width:auto;" and let the browser calculate the math and thus, auto-expand fully ("automatically"), taking into account all paddings and borders, if any.

[samoht]

When I try using auto my div does not fill the screen. - I thought auto would render the div width as wide as the contents inside the div??

[felgall]

Do you have width set to 100% for the html and body tags?

[WebJoel]

I should have pointed that out... 'width:auto;" expands to 100% of the parent element. Assuming this is a DIV in BODY, the CSS would inlcude:

html, body {width:100%;}

[samoht]

ok my div is inside another div - the parent div the body and the html all have a width of 100%

if I use width:auto it fills 2/3rds ish of the screen?
if I use width:100%; I get the horizontal scroll for the 10px;

a solution I found is nesting the div in another container div with a width:100% and the repeating background image.

but that seems like an unnecessary step?

[WebJoel]

No, not an extra step. It works and that is what I often end up doing too. :)