www.webdeveloper.com
Results 1 to 7 of 7

Thread: width 100% padding 10px problem

  1. #1
    Join Date
    Jul 2007
    Posts
    49

    width 100% padding 10px problem

    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,

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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.

  3. #3
    Join Date
    Jul 2007
    Posts
    49
    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??

  4. #4
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Do you have width set to 100% for the html and body tags?

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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%;}

  6. #6
    Join Date
    Jul 2007
    Posts
    49
    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?

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    No, not an extra step. It works and that is what I often end up doing too.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles