SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Negative Margin Sidebars with Fluid Layout?

    Hello all,

    I am having difficulty with CSS on our website. I am trying to create a 3-column layout, with sidebars being a set width and the middle being elastic so that is expands and shrinks according to the size of the browser window. The problem is that we have a SEO-optimised theme for our store, so the content comes before both of the sidebars. I tried to use negative margins to position both sidebars. Either I didn't do it properly, or it won't work for my example, because I get some strange results:

    http://rrcoins.net/beta2/confederate-states/

    If you visit that link, you'll notice that, as you stretch your screen, the left sidebar actually pops out of the site's wrapper! Can someone help me figure out how to keep this from happening?

    Also, what's the best way to make the middle column elastic? I tried something here, but I'm not sure if it's the right way-->
    http://rrcoins.net/beta2/1864-five-d...ency-t-69.html

    Thanks in advance for all suggestions!
    Independent Web Designer/Developer in Mandeville, LA USA
    1. JoeyReed.com
    2. Crawfish.com
    3. Pralines.com

  2. #2
    SitePoint Member
    Join Date
    Jun 2009
    Location
    Los Angeles
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your second link looks good in the most modern browsers, but IE6 & 7 don't render too well. Go figure.

    If you can get the left-sidebar before the main content in the html, floating the three sections left and using percentages is a common way to get everything to stay in sync, even in IE6. You can try adding min-width to the larger container so things don't get too compressed with a skinny browser window as well.

    Here's a great example:
    http://tjkdesign.com/articles/liquid/8.asp

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I am trying to create a 3-column layout, with sidebars being a set width and the middle being elastic so that is expands and shrinks according to the size of the browser window. The problem is that we have a SEO-optimised theme for our store, so the content comes before both of the sidebars.
    Hi socalcane,

    By using one extra wrapping div you can make a fluid-width/content-first layout fairly easy.

    View the page source of This 3-Col Demo and you will see that the #inner div wraps up the #main and l#left columns. The #main (center) div is fluid width.

    More details about the code are explained in the demo.

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks once again for your help, Ray. That was exactly what I needed. It took me a little while to tinker around with the previous stylesheet to make it all work, but in the end... problem solved!

    Thanks again!
    Independent Web Designer/Developer in Mandeville, LA USA
    1. JoeyReed.com
    2. Crawfish.com
    3. Pralines.com


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
  •