SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it possible to set the contents of a div to a fixed width with the div at 100%?

    I have a div in which I want the background image to be repeated across the width of the viewport, but I want the content of the div to be fixed at 977 pixels, centered in the div. I don't think this is possible, but just wanted to pose the question here in case their is a novel css method or trick I have not considered.

    So, the div would have no intrinsic width assigned (or 100%), the content should be 977 pixels and the padding, left and right should be auto.

    What I'm trying to achieve is have a repeated background image that spreads across the entire width of the viewport, and a second attached image (the logo graphic), which is aligned to the left of the fixed 977 pixel main container.

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Unless I'm missing something, wouldn't it be easy enough to have one <div> with a width of 977px, containing the content, inside another <div> with a width of 100% and a background image?

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yeah what Stevie said should work. It's pretty basic.

    Two divs. Outer and inner. Outer holds the viewport image. Inner holds content. Inner just needs to be set to 977px width and margin:0 auto;

    If you want hte viewport image to be 100% height as well, you'll need html,body{height:100%} and then set min-height:100% on viewport div.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  4. #4
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Unless I'm missing something, wouldn't it be easy enough to have one <div> with a width of 977px, containing the content, inside another <div> with a width of 100% and a background image?
    Yep, it sure would

    But...

    The markup is fixed. I cannot add/remove divs from the markup. I have to work with what I have.

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    The best you could hope for would be to use a % padding on a div that is 100% width to give that illusion.

    However, you wouldn't be able to get it a true fixed width, it'd always be a bit variable.

    Could you apply the background to the body and make it a fixed width div perhaps?


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
  •