dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: width: 100% minus 2 pixels?

  1. #1
    Join Date
    Jul 2007
    Posts
    6

    width: 100% minus 2 pixels?

    I've got a div#bodyContent of variable width. Inside this I've got a div with a 1px border all the way around (let's call it 'the box'). I want the box including the border to fill out the entire width of #bodyContent regardless of whether the content of the box takes up that much space.

    The problem is that my solution of assigning the box a width of 100% seems to be interpreted by Firefox (IE is of no interest since it's local css) as the width of the box without padding or border. Which means that the width of the box including borders becomes 100% plus 2px (left and right border).

    I'm not entirely sure that the above interpretation of the box model is correct but if it is, how do I accomplish this?

    P.S. I can't change the html/add wrappers/containers etc.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Remove the width:100%; the div will naturally stretch to fit within the container.

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    body {padding:1px;...}
    #bodyContent {width:100%; border:1px solid black;...}

    "#bodyContent" will be 100% of the 'parent element' ("body"), which itself will be 1-pixel-per-side smaller all-around due to the 1px padding.
    Possibly even, make the body have "padding:2px;" and clear a little extra room.

    If your page has a 'wrapper', same thing applies as "#wrapper" would then be the 'parent' of "#bodyContent".

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