SitePoint Sponsor

User Tag List

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

    Footer inside a fixed width container needs to be full browser width?

    I've included a snapshot of my layout below. Each square represents a div.



    What I'm trying to achieve is to have a background behind the .pre-footer and .footer elements that spans the entire width of the browser.

    Currently, since these elements default widths are constrained by their parent div, .main, any background applied to them is only as wide as the parent container width.

    How would you achieve a full width background for these elements? (While at the same time, maintaining a fixed width, centered layout for the other elements as in the snapshot.)

    I've attached a modified version of my layout below, to show you my intended final layout, with a the pre-footer div floating to the left of the footer div and its child elements floated to the left of each other.



    I've got the css for the basic layout down. I just need some ideas on how to arrange the .pre-footer and .footer css to do the full width background, with centered elements.

    Any help much appreciated.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,623
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Your going to have to take it out of the wrapper and place it below the wrapper to get 100% width. Then just drag it up where you need it placed.

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Your going to have to take it out of the wrapper and place it below the wrapper to get 100% width. Then just drag it up where you need it placed.
    Thanks Eric, but I should have clarified this. The layout cannot be changed, so I'm looking for a pure CSS solution.

    I'm pretty sure I can absolutely position those elements and set the width property to 100% and the left property to 0. That gives me full width at the bottom of the flow. However, I still want the elements centered.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,623
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ok. You shouldn't have to AP it. Just give it a larger width then. I think ie6 will expand the parent container though. Don't really know I've never over-widthed. Other then that I don't really see another way. Maybe others will...

  5. #5
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Ok. You shouldn't have to AP it. Just give it a larger width then.
    I'm pretty close with the AP. Assigning a width wider than 100% is problematic and will force horizontal scrollbars.

    Here's what I've got so far that's working reasonably well...

    Code:
    html {background:#f5f5f5 url(splash_bg.png) 0 5px repeat-x;} 
    /*
    this background extends all the way down the window and becomes 
    the background for the footers (since .wrapper stops just above the footer)
    */
    
    .wrapper {background:#ccc url(splash2_bg.png) 0 155px repeat-x;} 
    /*
    this background extends from below the header all the way to the top of the pre-footer element.
    */
    
    .main {width:927px;margin:0 auto; position:relative;}
    
    .pre-footer {position:absolute;width:100%; left:0;}
    
    .pre-footer .text-widgets {float:left;max-width:230px;margin-right:20px;}
    
    .footer { position:absolute; width:100%; text-align:right; right:20px; margin-top:30px;}

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,623
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    If you go wider than the browser window it will always create horizontal scroll bars. The only way around that is to use position fixed but that will not work in your case.

  7. #7
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    If you go wider than the browser window it will always create horizontal scroll bars.
    That's right. That's why I could not implement your original suggestion. I don't want horizontal scrollbars on the layout.
    Quote Originally Posted by EricWatson View Post
    The only way around that is to use position fixed but that will not work in your case.
    Actually, not exactly. I've posted the solution just above. Adding AP to the div, then setting the width to 100% and the left position to zero, effectively solved my problem. I solved it while waiting on an alternative answer here.

    I'm open to other ways of doing it that might be more bulletproof, but for now, what I've posted above works very well in the modern browsers I've tested against (ie9, FF3, Chrome).

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,623
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    That's right. That's why I could not implement your original suggestion. I don't want horizontal scrollbars on the layout.

    Actually, not exactly. I've posted the solution just above. Adding AP to the div, then setting the width to 100% and the left position to zero, effectively solved my problem. I solved it while waiting on an alternative answer here.

    I'm open to other ways of doing it that might be more bulletproof, but for now, what I've posted above works very well in the modern browsers I've tested against (ie9, FF3, Chrome).
    Well I think something is amiss. Because you have position relative on your .main. So if you set left zero on the footer then it would be sitting directly flush with the left side of your .main. If you remove the position relative from the .main then it will go to left zero of the body (unless another container has PR). If thats the case then that may work on your computer but the position will change for others.

    Edit: unless I'm completely confused and you simply just want the footer full width of the .main? I thought/think you wanted it full width of the body?


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
  •