SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: 100% width in a 960px container

  1. #1
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    711
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)

    100% width in a 960px container

    I have a container set to 960px with 20px of padding, and a div set to 100% inside of that. Now, my question is: how can I force the div to take up 100% of the container from edge to edge even though I have set a padding?

    I know how to do it, just want to make sure I'm doing it the best way possible.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Rockford, IL
    Posts
    2,361
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    well, if the div isn't AP'ed best way I know is to set negative left and right margins.

  3. #3
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    711
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. No it isn't absolutely positioned. And the way my page is set up, it would be impossible for it to be so.

    I was thinking the negative margins would be the best way, just wanted to make sure I wasn't overlooking something.

    If anyone knows of a better way to do this, please chime in.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,749
    Mentioned
    99 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    I have a container set to 960px with 20px of padding, and a div set to 100% inside of that. Now, my question is: how can I force the div to take up 100% of the container from edge to edge even though I have set a padding?

    I know how to do it, just want to make sure I'm doing it the best way possible.
    You would need to remove the 100% width and let the width be auto and then use negative margins of -20px on each side. For ie7 and under you will also need to add position:relative and zoom:1.0 or the element won't behave properly.

  5. #5
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    711
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Actually, I don't have it technically "set" to 100%, I'm letting the parent define the width.

    Thanks for the tip about IE7!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,749
    Mentioned
    99 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    Actually, I don't have it technically "set" to 100%, I'm letting the parent define the width.
    Yes, I guessed you meant that but I was just making sure

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Though, word of advice -- NEVER set padding the same time as a fixed width, too much of a pain in one's backside. Side-Margin or pad the child elements instead of padding the parent... It's just less headaches all around.

    Especially if you're still expected to support the page being usable back to 5.5 (doesn't have to be perfect, just has to be usable) with the 'broken' box model.

  8. #8
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    711
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Though, word of advice -- NEVER set padding the same time as a fixed width, too much of a pain in one's backside. Side-Margin or pad the child elements instead of padding the parent... It's just less headaches all around.
    Interesting. I don't usually set padding like that for different reasons, just using it as an example.

    Quote Originally Posted by deathshadow60 View Post
    Especially if you're still expected to support the page being usable back to 5.5 (doesn't have to be perfect, just has to be usable) with the 'broken' box model.
    I've totally dropped support for IE5.5 a long time ago... and I'm not looking back. I do understand however, that it should still be usable and it will.

Bookmarks

Posting Permissions

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