Time for me to go table-less with a simple 2 column, left sidebar, non-liquid, centred CSS layout - with content above the sidebar. As far as I can see this can be achieved in two ways, one using floats and negative margins; the second just using floats. Question for debate: whats the advantage of using negative margins? I've posted 2 very simplistic layouts below, one for each. Please feel free to critique, comment or advise, but as I said above, the main question is negative margins or not? Looking forward to your comments and help! (Apologies in advance for the long post - haven't figured out how to use a scrolling window for the code below) SIMPLISTIC LEFT SIDEBAR WITH NEGATIVE MARGINS LAYOUT ---------------------------------------------------------- <head> <style type="text/css"> * {margin: 0; padding: 0; border: 0; } body {} #wrapper_outer {width: 780px; margin: 0 auto; } #header {} #container {width: 100%; float: right; margin-left: -200px; } #content { width: 580px; margin-left: 200px; } #sidebar {width: 200px; float: left; } #footer { clear: both; } .clearfloats { clear: both; height: 0; line-height: 0; font-size: 0px; } </style> </head> <body> <div id="wrapper_outer"> <div id="header"> HEADER HERE<br /> <br /> <br /> <br /> </div> <div id="container"> <div id="content"> CONTENT HERE<br /> <br /> <br /> <br /> <br /> </div> </div> <div id="sidebar"> LEFT SIDEBAR HERE<br /> <br /> <br /> </div> <div class="clearfloats"> </div> <div id="footer"> FOOTER HERE<br /> <br /> <br /> </div> </div> </body> </html> SIMPLISTIC LEFT SIDEBAR - NO NEGATIVE MARGINS -------------------------------------------------- <head> <style type="text/css"> * {margin: 0; padding: 0; border: 0;} body {} #wrapper_outer {width: 780px;margin: 0 auto;} #header {} #logo { float: right; width: 200px;} #wrapper_inner {width: 780px;} #content {float: right; width: 580px;} #sidebar {float: left;width: 200px;} #footer {clear: both;} .clearfloats {clear: both;height: 0;line-height: 0;font-size: 0px;} </style> </head> <body> <div id="wrapper_outer"> <div id="header"> HEADER HERE<br /> <br /> <br /> <br /> </div> <div id="wrapper_inner"> <div id="content"> CONTENT HERE<br /> <br /> <br /> <br /> <br /> </div> <div id="sidebar"> LEFT SIDEBAR HERE<br /> <br /> <br /> <div class="clearfloats"> </div> </div> </div> <div id="footer"> FOOTER HERE<br /> <br /> <br /> </div> </div> </body> </html>
Top get the scroll thingie, use [ code ] (but without the spaces around the word "code"). It also preserves your indents. Close with [/ code ] I've used the second but without the float on the right part (meaning the content came after the sidebar) BUT I had a skip link for bots-n-blinds. It depends on what your sidebar is used for, whether you need the content to come first. SEO-wise, teh googlies will see all of it anyway. I kept my sidebar at the "top" of the document because it's an insurance site where the sidebar has all the account info and when someone is getting a bunch of quotes, the totals are in the sidebar under their account names-- useful to see every time you ask for a new quote. I've also kept hearing about IE6 having some sort of trouble sometimes with float: right??? But I dunno what it is... so I'd take the first example as being safer. Negative margins are a pretty important tool I'd say.
Thanks Stomme poes - makes sense for you to have your sidebar appearing above the content. In my case its not so which is why I've opted for the layouts above. Interested if anyone has any info about the IE6 float right problem you mention above. The reason I posed the question about -ve margins or not is that I've seen a lot of sites using the non -ve margin version, but I keep hearing about how useful -ve margins are. Wonder if anyone has any examples of real life sites using -ve margins? I also heard that Wordpress has problems with -ve margins. Anyone got any comments?
Well, this'll get your started. It's deathshadow's three-column css using negative margins actually in action. http://battletech.hopto.org/html_tutorials/3coldiv/template.html
The main difference is if you want a dynamic width layout, content first, with a column on the LEFT - negative margins is your only real option. The negative margin approach is also less prone to breakage due to IE's float model bugs. Honestly, if you are desiging a crappy little fixed width stripe, you could go either way. You want a dynamic content area, normal floats start to /FAIL/ hard. The first example has some 'issues' - you've got the negative margin on the wrong element, so it doesn't work in Opera, IE or Safari... you've got the float going the wrong direction on the sideBar, and there should be NO reason to need the stupid clearing DIV... oh and you do know that 780px is NOT 800 friendly on all browsers, right? For example, a normal float layout would be a pain in the backside for these three column layouts, especially if you care about source order. (personally I've got mixed feelings on that subject) http://battletech.hopto.org/html_tutorials/baselines (the layouts are in the subdirectories) Oh, and word of advice - setting 0 BORDER on everything - bad idea. Just set it on IMG, MAYBE fieldset (I just don't use fieldset - solves a lot of problems right there), and keep the rest. While zeroing padding and margins is great for cross browser, zeroing borders on EVERYTHING can cause more problems than it solves. Of course, the illegible ****ing mess of CSS doesn't help. (Gentle ribbing - I hate single line CSS - how the *** do you tell where one property begins and the next ends - ESPECIALLY with the spaces after the colons)
Hey deathshadow - thanks for the comments, exactly what I'm looking for. Sounds reasonable and answers my main question, thanks. Lol, I've heard you tend to speak bluntly. Each to their own and for fear of getting shot down in flames a) I dont need a third column for ads etc - the site sells a specific service and I dont want competition on there. b) I personally find the third column a bit restrictive - bearing in mind point (a) - as it cuts down copy layout flexibility in the main content area. (c) I think liquid layouts are great but they dont work for this site's product offerings. Unfashionable maybe .. Now I'm confused - which element should the -ve margin go on? (Ok, I lifted the code from the original A List Apart article, which is now a more than a few years old ...) But it looks ok in Opera and IE to me as is (albeit latest versions). Also, the float on the sidebar, shouldn't it be as is for a LEFT sidebar? As for the "stupid clearing div", lol point taken! And yes, 768px is friendlier. I've had a look at your layouts and working through the CSS logic, slowly in an attempt to extract the relevant code for a 2 col layout.
The sidebar. The negative margin equals the width of the sidebar. That makes it look like (to the page) it's got a width of 0 (that's how it fits). Instead of the clearing div, some people use overflow: hidden to make containers container their floats. body {} #wrapper_outer {width: 780px; margin: 0 auto; } #header {} #container {width: 100%; float: left; } #content { width: 580px; margin-right: 200px; } <--makes room for sidebar. #sidebar {width: 200px; float: left; margin-left: -200px}<--makes width like 0, bumps float up to alongside #content... this is a page with right sidebar. #footer { clear: both; } For left sidebar: etc #container {width: 100%; float: left; } #content { width:580px; margin-left: 200px; } <--makes room for sidebar. #sidebar {width: 200px; float: left; margin-right:-200px; left:-100%; } <-- the -100% pushes it from right side to left side of page. etc I think. I always need to build it to get it straight in my head. This is still taken from the page deathshadow posted. Once you get it, it's easy and really cool. One thing I've learned, too, is that while you think the margins you set on #content only have to be wide enough for the sidebars, they actually must be exactly the width you need. Extra margin space apparently doesn't cut it. One time everything looked fine on everyone but IE6. That was the problem. And the IE float problem thing has to do with a right-floated container with left floats inside... and you can almost always get away with floating everything left anyway. Even the stuff you want ot the right. : )
Yeah, soulscratch, but whoops I forgot the "position: relative;" part first. For the right sidebar, when the sidebar content comes after the main content, it'll start out under the content on the left side (cause it's floated left), and after the negativ margin it bumps up to the right side of the main content. But if you want a LEFT sidebar in this same situation, you give it a negative RIGHT margin, say position:relative which I forgot (so now the left sidebar is off-screen on the RIGHT side of the page), and then left: -100% to get it to the left side of the page.