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:
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?
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.
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.
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!
