A List Apart: Comments on: Creating Liquid Layouts with Negative Margins

Posted by: amon-re

2012-01-31T13:00:49+00:00

Interesting article. I believe that this technique is only useful for variable-width layout, though. A fixed-width content div could easily be put before the sidebar and then just floated. No need for a negative margin workaround.

Posted by: Loz

2012-01-31T13:00:49+00:00

Will CSS3 add anything that will remove the need for all the extra divs?

Posted by: Kevin Etter

2012-01-31T13:00:49+00:00

This is truly innovative, Ryan. Example 3 is very clean in its source. While "unconventional", it does have a certain obviousness to it(20/20 hindsight). Thanks, Kevin

Posted by: Sean

2012-01-31T13:00:49+00:00

I was having problems with a two column/footer layout. Mine was fixed width but using float instead of trying to absolutly position things was perfect. I did some CSS hacking after reading this article and it really saved my bacon!

Posted by: Simon Jessey

2012-01-31T13:00:49+00:00

Isn't it easier to just float the content DIV? I'm working on a new layout that will do just that. The content is floated to the left, and the sidebar slots in on the right. An added complication is the fact that they will be truly fluid, with both columns having their widths defined by percentages. I haven't yet figured out a way to incorporate faux columns into this new layout. It works, but browser inconsistencies spoil it.

Posted by: Colm

2012-01-31T13:00:49+00:00

The Faux columns are pretty easy to implement. based on a 20% width sidebar, create a 2000px wide 10px height image, set 400px (20% of the width) to the colour/design of you choice, then set this as the background image of the containing div with an image position of 20% 0; offset and eh voila. There may be some browser differences but it's one of the better methods for faux column in liquid layouts

Posted by: Greg

2012-01-31T13:00:49+00:00

I've found that adding any top and bottom padding to a DIV keeps the top and bottom margins of internal elements from bleeding outside the DIV. Even a 1 pixel margin is enough to prevent this annoyance.

Posted by: Janos Horvath

2012-01-31T13:00:49+00:00

I first read about this negative-margin magic at mezzoblue. http://www.mezzoblue.com/archives/2004/01/23/friday_chall/index.php Great solution Ryan! The clerar DIV thing. It is possible without extra markup: http://www.positioniseverything.net/easyclearing.html

Posted by: Machuidel

2012-01-31T13:00:49+00:00

My website currently in development is using the same technic. I based my layout on: http://www.webproducer.at/flexible-layout/

Posted by: Dave

2012-01-31T13:00:49+00:00

Or you could just make the right hand margin of the content 200, and then set the menu to be absolutly positioned with top and right

Posted by: Eric Everman

2012-01-31T13:00:49+00:00

After reading the article, I believe that Ryan Brill's technique works, but I'm not sure why or how. From the article: ... The negative right margin has more to do with allowing the sidebar to float up into this element�s space than it does with any positioning/appearance ... Could someone elaborate on why the use of a negative margin is the key to making this technique work? I saw on Mezzoblue (http://www.mezzoblue.com/archives/2004/01/23/friday_chall/index.php) that columns floated left and right can end up stacking vertically rather then apearing side by side w/o negative margins. Do negative margins work around some type of CSS implementation bug?? Thanks, Eric Everman

Posted by: Mark Kawakami

2012-01-31T13:00:49+00:00

The #wrapper div is a structural hack that, at least with this design, is unnecessary. It seems that you can apply a background color to the #container div that is the same as the sidebar (#e5e7d3) and apply a 1-pixel border to the right side of the #content div. I haven't played with the three column example, but I suspect that the extra div may be unnecessary there as well. Alternately, if you need a fancier border effect, you can apply a repeating, right-aligned background image to the #content div. Now, both of these techniques will fail if the content takes less vertical space than the sidebar, however, so will the illusion of the header and footer.

Posted by: Seth Thomas Rasmussen

2012-01-31T13:00:49+00:00

When will people stop promoting that PIE method of clearing without extra markup. It's an absurd solution! Exchange one, ONE unecessary(in an ideal world)

for SEVERAL lines of bloated, idealist code? Just not worth it... and not very sensible.

Posted by: Machuidel

2012-01-31T13:00:49+00:00

Eric and Dave. What's so special about this implementation is that any column can be longest, fluid and/or fixed while staying source ordered. This combination makes it so powerful.

Posted by: Alex Billerey

2012-01-31T13:00:49+00:00

Ryan, Very interesting article. The link I included is my modest efforts on using negative margins to try and achieve interesting looking sites. Consider it W.I.P. Comments welcome

Posted by: John Doe

2012-01-31T13:00:49+00:00

just a reminder - extra div will be on every page on your site (there can be hundreds of them) and will travel on every request, while CSS is in one file and instantly cached.

Posted by: Richard D. Bartlett

2012-01-31T13:00:49+00:00

This is a really good article, don't get me wrong. The most striking thing I got from this article, though, is what a pig the current web design methods are. It is such a mammoth effort to achieve such a straight-forward effect. By my count, it took 1000 words for the good Mr. Brill to explain how to make a website with two columns. Ridiculous! What's being done to ensure CSS3 (etc.) isn't equally useless?

Posted by: Mark Elliot

2012-01-31T13:00:49+00:00

Until I discovered margin-left: auto as an alternative, I was using negative margins to center items. While I don't recall the exact code to have that functionality - it did do something similar to what's been done here. I'd be curious if there were a way to have resizing columns - that is a completely variable width solution to a 3 column layout..currently you're stuck with some number of defined pixels... On a final note - I hadn't considered using negative margins like this before, probably something of a focused paradigm, and I have to hand it to the author - this is _really_ clever.

Posted by: Max Romantschuk

2012-01-31T13:00:49+00:00

Thanks for enlightening me Ryan! I've been trying to figure out how to make three liquid columns and a header play along nicely for several weeks, and I'm quite confident you just saved my bacon. My layout is based on ems instead of pixels (everything is relative to font size,) but I suspect your technique should work just fine.

Posted by: stylo~

2012-01-31T13:00:49+00:00

Can we get a list of what it works in? Mac ie 5? Safari? Win ie 5? Any weird problems anyone's noticed, like ie6 makes your grandmother gassy if in strict mode and no background is set?

Posted by: Chris Hester

2012-01-31T13:00:49+00:00

"However, since it is preferable to have the page's content come before the sidebar in text browsers, screen readers..." I disagree. There are two schools of thought here. One says it is better with the side bar (assuming it is a menu) *first*. The reason is obvious: screen readers otherwise have to read through the *entire content* of the main column before offering any menu links to the user. However, if the links come first, you need to add a "Skip menu" link to the main content so people don't get sick of hearing each link read out on every page. (Something the W3C recommend.)

Posted by: gunzip

2012-01-31T13:00:49+00:00

Yet another contorted CSS alternative to something which is simple with tables. Try teaching this to new students along with the table method and ask them which they think is more intuitive. CSS layout is a dead duck. CSS if fine for presentation but let's face it, the whole CSS-P layout thing was an afterthought and it's lack of coherent design is obvious. If using CSS-P layout hacks such as these are somehow part of web standards then web standards don't have a chance of reaching the masses. This will not be the last CSS layout hack, of that I'm sure.

Posted by: Johan Sand

2012-01-31T13:00:49+00:00

Original example nr. 5: http://www.browsercam.com/public.aspx?proj_id=73252 Example nr 5 where the navigation bar is taller/longer than the main area: http://www.browsercam.com/public.aspx?proj_id=73249 Example nr 5 where the side bar is taller/longer than the main area: http://www.browsercam.com/public.aspx?proj_id=73260 (background color has been added to "main" and "outer_wrap" div on the last two examples) The above doesn't say anything about what happens when resizing or scrolling, of course.

Posted by: apartness

2012-01-31T13:00:49+00:00

Gunzip: Technically speaking, the layout method described in this article is not a CSS hack. When you exploit bugs or deficiencies in a semi-CSS-compliant browser to trick that browser into displaying your layout correctly, *that* is a CSS hack. For instance, a common CSS hack consists of writing false width values to compensate for IE5/Win�s incorrect support of the CSS box model � and then using a sophisticated CSS selector to reveal the true width value to better browsers. THAT is a CSS hack. Understanding how CSS actually works and employing CSS as it was intended is not hacking, it is merely using CSS. That CSS is sometimes counter-intuitive (which is your larger point) is true. That�s why we run articles like this one; it�s why people like Eric Meyer write books. Table layout seems intuitive now, but if you can think back to when you first learned it, and if you are honest, you may agree that rowspan and colspan and spacer GIF images and so on were also counter-intuitive until you got the hang of them. To your larger point that CSS is too difficult to catch on, I would say that the existence of numerous commercial and organizational sites designed with CSS suggests otherwise. Learning CSS layout may be difficult in some ways, but it�s what the industry is doing. An ever-growing number of designers is either using CSS and XHTML, or using Flash, to design increasingly visually sophisticated sites. It is true that CSS is particularly unfriendly to liquid layouts. I said the same after publishing the first CSS version of A List Apart in February 2001, and I said it again in my book, Designing With Web Standards. But few clients want liquid layouts. My agency is known for standards-based design; as a result, we receive many RFPs written by technically-minded people (IT department heads, old-school �webmasters,� and so on). Of all the RFPs we�ve received in the past 24 months, only one mentioned liquid layout in its requirements � and we ended up not working on that job anyway, so I don�t know if the client would have stuck to his guns about that requirement or not. Most clients want layouts that look as tight and good as print. And that almost always means they want fixed-width layouts (typically 770px wide) that are centered or aligned left. And CSS makes it very easy to create such layouts, using float or absolute positioning or a combination of the two. The tricky part is compensating for older, less compliant browsers, but the workarounds are well known. CSS layout is catching on because it provides real benefits, and because those methods that work best in CSS coincide with what most clients want.

Posted by: david

2012-01-31T13:00:49+00:00

Gunzip, Following up on apartness, you should realize that using tables for layout is more of a "hack" than this technique. Using tables for layout is using them to solve a problem outside the scope of their original purpose (displaying tabular data), thus, a hack. Times are changing sir, change with them.

Posted by: Gee

2012-01-31T13:00:49+00:00

Is what I've been calling this technique since I first saw the implementation over at http://www.webproducer.at/flexible-layout/. Worth checking out.

Posted by: Gee

2012-01-31T13:00:49+00:00

Kind of...I see now that Tonico is already represented on this thread. Sorry about that. Still a good implementation, though.

Posted by: Paulo Eduardo Neves

2012-01-31T13:00:49+00:00

It's a nice technique, the only thing that bothered me is the class="last" in the last paragraph to remove the bottom margin. If you have your content in some kind of database and extract it to display, this class creates the need to modify the content to do it. Is there any trick to bypass it?

Posted by: Daniel

2012-01-31T13:00:49+00:00

Thought I'd give this a shot for a new table-less redesign, but am having trouble with IE's tiling of the right column background image: http://www.auroratheatre.org/v4/ If the right column is longer than either of the other two, then the background color of the outer_wrapper shows between the tiling for the wrapper and the container. Have I done something wrong? Anybody else having this problem? -D

Posted by: Tim

2012-01-31T13:00:49+00:00

Daniel, you should set a background color to the #sidebar And I found a typo going through your stylesheet: #header { border_bottom: 1px solid #CF5813; background: #000; no need to explain, is there?

Posted by: Johan Sand

2012-01-31T13:00:49+00:00

Don't get me wrong here, but I figured it could be an idea to address this issue. It seems like one "major" problem with the css column layout (liquid or static) is that the individual columns never "tag along" vertically as they did back in the good old days when we were playing around with table layouts. There are numerous examples and ideas out there on how to solve or work around this problem: Ryan Brill (currently): http://www.alistapart.com/articles/negativemargins/ Dan Cederholm: http://www.alistapart.com/articles/fauxcolumns/ Tonico Strasser: http://www.webproducer.at/flexible-layout/ Douglas Livingstone http://www.redmelon.net/tstme/3cols2/index.htm to mention a few... And yet there's always, in each example, still today, at least one column left behind when using the infamous 3 column layout. We saw the latest example right here in this article where the content area got left behind, which is the case in all other 3 column layout examples I've seen so far. The consequence is, of course, that in these cases you don't "control" the entire canvas in terms of decoration and placement of graphical elements, which on certain occassions happens to be important to, let's say, your client. If in doubt, take Ryan Brill's example right here, fill the side bar with enough stuff to make it the tallest column, and then place a graphical frame around the content area that stretches around the _entire_ area we like to think of as the content area and then, why not, place a graphical element at the bottom of the content area. Feel free to try this with Tonico's or any other's example out there as well if truly in doubt. I always figured, why don't these highly talented guys just take it the extra mile and give everyone what they seem to need - a 3 column layout that "appears" (that's all it is anyway) to stretch all the way down to the bottom of the tallest column, no matter which one of the three it happens to be, and provide a solution where you can manipulate each column (with graphics and other funky elements) to its full extent? None of them is that far away from it anyway. So, not to shoot anyone in the foot, here goes: Since I claimed most of the examples and suggesitons presented really do work with a few changes implemented, I simply grabbed one from the list. I took Livingstone's 3 column layout, and changed some things. First we just do the basic 3 column layout with changes applied: Content tallest: http://www.i-lab.com/z-misc/ala/liquidcleana.html Content tallest - Browser compability: http://www.browsercam.com/public.aspx?proj_id=73591 Navigation Bar tallest: http://www.i-lab.com/z-misc/ala/liquidcleanb.html Navigation Bar tallest - Browser compability: http://www.browsercam.com/public.aspx?proj_id=73598 Side Bar tallest: http://www.i-lab.com/z-misc/ala/liquidcleanc.html Side Bar tallest - Browser compability: http://www.browsercam.com/public.aspx?proj_id=73606 It doesn't look that different from, for example, Ryan Brill's method, except... Now we add some decoration to it (extra ugly graphical elements applied for your pleasure): Content tallest: http://www.i-lab.com/z-misc/ala/liquiddecoa.html Content tallest - Browser compability: http://www.browsercam.com/public.aspx?proj_id=73617 Navigation Bar tallest: http://www.i-lab.com/z-misc/ala/liquiddecob.html Navigation Bar tallest - Browser compability: http://www.browsercam.com/public.aspx?proj_id=73629 Side Bar tallest: http://www.i-lab.com/z-misc/ala/liquiddecoc.html Side Bar tallest - Browser compability: http://www.browsercam.com/public.aspx?proj_id=73634 Now that's what I've been waiting to see and have explained in one of all these articles since I'm not a top notch writer myself. Feel free to take code, graphics and whatever from these examples, they're not mine anyway, I just used them as puppies and modified where needed. If you want an explanation or further examples, just email me. Disclaimer: I've been a bit of a lazy git here, so the code needs cleaning. I'm also not saying it's all standard and not a hack or work around. I'm not even saying this is the way I normally solve it myself. I'm merely suggesting that in most cases - it works. cheers /j.

Posted by: Big john

2012-01-31T13:00:49+00:00

Normally I don't try to hog credit, and I won't this time either because I didn't originate the idea, but neg margined floats has been around for 8 months at least. I did a demo of the method: http://positioniseverything.net/piefecta-rigid.html ..way back in Feburary. It is a rigid three col version that has the center col first in the source. BTW, I have a fluid version of this demo, but time constraints have kept me from finishing it for publication. One of these days...

Posted by: Ryan Brill

2012-01-31T13:00:49+00:00

John, I'm interested in your "8 months at least" comment. This idea originated (on my part, anyway) back in January over at Dave Shea's site ( http://www.mezzoblue.com/archives/2004/01/23/friday_chall/ ), and at least at that point I had never seen anyone use it before. I'm not saying that it had never been done before - just saying that I had never seen it done and it certainly wasn't well known. But, I am interested in knowing if this technique was around before my solution to Dave Shea's challenge, as your 8 month time frame seems to indicate.

Posted by: Fosod

2012-01-31T13:00:49+00:00

I have found that the left navbar does not function identically to the right sidebar, as it is contained within the same div as the main content. Repeating the left navbar div, therefore, results in overlapping content. This is an innovative, but WEIRD solution. More like the first in a series of brainstorms to solve a problem... too many divs begins to defeat the purpose.

Posted by: mare

2012-01-31T13:00:49+00:00

If you see these examples with a big fontsize (as people do who can't see very well) it really falls apart. Because the sidebars are width is not realated to fontsize the text crawls under and over the different div elements. Just press you browsers font size buttons a couple of times and you see what I mean. Not good.

Posted by: Derek Pennycuff

2012-01-31T13:00:49+00:00

I've always wished we could do things like width: 100%-200px; I'm gonna have to go over your code in more detail and fully wrap my head around it. I'll probably end up having to build something as an excuse to try this technique out, then try like hell to break it. It looks like to me if you set the width of an element to 100% and then give it a negative margin, then it would be painted at the same width as the available browser window space and then moved over by the negative margin given, cropping off a number of pixles equal to the negative margin into the limbo beyond the visible screen. This is obviously not what happens, and I'm kicking myself for having just assumed that would be the way it worked instead of trying it out to see. This little trick is definately going into my mental toolbox. Thanks.

Posted by: Machuidel

2012-01-31T13:00:49+00:00

That's a very nice hybrid Johan. It has everything I wish for: - Source ordered. I can put the columns in any order without changing the markup. - Flexible and/or fixed columns. - Clean, more semantic markup. No need to wrap 2 columns anymore. - Any column can be longest. I tested it on several browsers as well. It worked in all of them. Thanks

Posted by: Janos Horvath

2012-01-31T13:00:49+00:00

Negative margins on the right side doesnt work the same as on the left. The Specification sais: http://www.w3.org/TR/REC-CSS2/visudet.html#Computing_widths_and_margins ---- 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block (If the border style is 'none', use '0' as the border width.) If all of the above have a specified value other than 'auto', the values are said to be "over-constrained" and one of the computed values will have to be different from its specified value. If the 'direction' property has the value 'ltr', the specified value of 'margin-right' is ignored and the value is computed so as to make the equality true. ---- So if the container DIV is - not floated - width is 100%, - all padding, border and left-margin is 0 then the negativ right-margin constrained 0 too! BUT here the container DIV is floated! But the spec sais: http://www.w3.org/TR/REC-CSS2/visuren.html#floats --- A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). --- This is why this solution works.

Posted by: MaThIbUs

2012-01-31T13:00:49+00:00

"Of course, using the @import rule on your final sites would be a good idea to keep your site from getting displayed with its pants down in legacy browsers." Really? If a visitor of my site wants to view the site without CSS, why would I stop him from doing that? Why not use link rel (with a title attribute)?

Posted by: Ian B

2012-01-31T13:00:49+00:00

I've placed a search box in the sidebar div (which is flipped to the left hand side as described in the article). The only problem is (in IE6 at least) you can't click in to the box to type anything (although tabbing will get you there). I'm guessing this is a consequence of the negative margin...

Posted by: Fred Vaughn

2012-01-31T13:00:49+00:00

MaThIbUs, The @import rule is from CSS2. Hence, in older as well as incredibly buggy browsers (in regards to CSS/JavaScript handling, etc.) will not recoginize this as they can just barely grasp CSS1. This is in fact considered good practice because as Ryan points out: you don't want an old browser trying to handle some CSS2. This can actually crash older browsers such as Netscape 4.x. By hiding such CSS from these browsers they get accessible, unstyled content. Which many agree upon as an acceptable solution as: 1) The user can see all content displayed on the page as it was meant to be. Sometimes you'll have boxes floating on top of each other, etc. and it just isn't pretty. By hiding the CSS completely ensures this will never happen. 2) You don't risk the user's browser *crashing* or any other potentially nasty things from happening. Hopefully this clarifies things for you. Fred V.

Posted by: Machuidel

2012-01-31T13:00:49+00:00

I'm wonderig if there's a way to get the floats wrapped by the content while keeping the source order "content first and navigation last"? I was thinking about creating a dummy box that's floated inside the content with the same size as the navigation box. Then the navigation box is drawn on top of it. Does anyone have a better solution?

Posted by: djmaniak777

2012-01-31T13:00:49+00:00

havent you seen the (skidoo) 2 and 3 column layouts by ruthsarian at http://webhost.bridgew.edu/etribou/layouts/skidoo/ because they seem to do what you might be looking for.

Posted by: Richard D. Bartlett

2012-01-31T13:00:49+00:00

Ian: You could probably just fix that with a z-index: 10000 Or is that too simple to work?

Posted by: Kim Pepper

2012-01-31T13:00:49+00:00

Its good to finally see a flow layout with footer example. I had previously thought I needed a fixed layout to get footers.

Posted by: Ian B

2012-01-31T13:00:49+00:00

Richard Tracked down the problem. As I said I'd swapped the sidebar div to the left, but then somewhere down the line I'd moved the HTML for the sidebar to before the content HTML (which is the exact opposite of what the article is about :-). Once I swapped it back all is well...

Posted by: Dave

2012-01-31T13:00:49+00:00

The model falls apart with font sizes other than default. IE6 doesn't work. NN7 also has problems. Opera looks good. FF.8 has problems. Mozilla 1.7 has problems. Is there any chance of updating the example so that when people change the font sizes by zooming in things stay nice?

Posted by: Jim Moran

2012-01-31T13:00:49+00:00

Douglas Livingstone has a CSS generator that has been going for ages, doing exactly this kind of layout. Check it out here. http://www.csscreator.com

Posted by: Dan

2012-01-31T13:00:49+00:00

Thanks for providing this useful insight into the technique.. I've come to appreciate layouts that don't require additional elements to be introduced to facilitate the design, so obviously in that respect it's not perfectly suited to certain pursuits.. but's it does present some useful ideas.. Dan

Posted by: Sam Ingle

2012-01-31T13:00:49+00:00

Jim: The layout generator on that page doesn't put the content first in the markup, which is one of the primary points of this article.

Posted by: Jesse Cizauskas

2012-01-31T13:00:49+00:00

Hello and thanks for the article, it has helped me learn CSS and apply in real world situations. I am trying to get away from tables as much as possible, and am having difficulty creating a 3 column (side columns should be liquid, centre content stays in the middle, exactly like this very page) layout in CSS. Tables are a snap. Can anyone point me in the right direction to a css solution? Thanks.

Posted by: PNDesign

2012-01-31T13:00:49+00:00

It seems to be a nice solution. I must test it :-)

Posted by: Jim Moran

2012-01-31T13:00:49+00:00

Sam, I'm not sure I see your point. The markup generated by the css generator is of a similar structure as the example in the article.

Posted by: Zeeza

2012-01-31T13:00:49+00:00

But is it possible to switch the left and right sidebar by CSS only? I'm working on a site that is skinnable via a stylesheet switcher, and I'd like to have the position of the sidebars switched for some of them.

Posted by: djmaniak777

2012-01-31T13:00:49+00:00

go have a look at the skidoo layout http://webhost.bridgew.edu/etribou/layouts/skidoo/ ruthsarians done it already.

Posted by: Deziggen

2012-01-31T13:00:49+00:00

Well I've read through all the comments, and some of the criticism may be fair, but for my needs (as an experienced HTML developer who's not yet a CSS guru) it's a fantastic solution. I've used the 3 column one, and compared to Skidoo it was a breeze to adapt. I hacked with Skidoo for 6 hours to get what I wanted, and still didn't fully understand it. Using this one I got my page sorted in under an hour and I know exactly what's going on in the code.

Posted by: Flypaper

2012-01-31T13:00:49+00:00

Good article - nice easy solution (well, it's always easy once you've seen it done!). So thanks for writing the article, and the site I've used your technique on is http://www.misanthropy.co.uk/

Posted by: Chip Hogg

2012-01-31T13:00:49+00:00

Problems arise when you want the navigation before the content in the markup. If you put the content after the navigation with a sidebar on the left, using this technique, Opera won't let you use any of the links. (Except if you cycle through them using 'a' and 'q'.) The fix for this is to set the navigational div to have "position: absolute; left: 0" but when your content is shorter than your navigation, anything below them comes all the way up to the bottom of the navigation. I don't see any easy way around this that isn't too hackish to be practical. BTW, I'm using Opera 7.52 for Linux. Maybe if I pay for it, all the bugs go away? ;)

Posted by: Alex Casamassima

2012-01-31T13:00:49+00:00

Something awkward happened with me. I put a table of 100% in the left column. then i put a table of 100% in the main column. The table in the main column remained in the column, but was positioned vertically lower than the table in the left column. Only solution i could find was to make the table in the main column 99% Now im not any good with Cascading Style Sheets, but I just wanted to know either: why that is happening? or, Is there a more appropriate way of avoiding that problem?

Posted by: The Forgettable Mister Ruthsarian

2012-01-31T13:00:49+00:00

Deziggen et al: It isn't my intention to make that Skidoo layout difficult to use. If you can e-mail me and tell me what specifically you had problems with I'd like to make the effor to fix things and make it easier to understand. To that end I've put together a 'lean' version of the layout that hopefully won't be as confusing. It's available here: http://webhost.bridgew.edu/etribou/layouts/skidoo/lean/index.html Thanks

Posted by: Thomas E Androy

2012-01-31T13:00:49+00:00

I followed this tutorial for a 2 column layout. I want to have my left column fluid and my right colum fixed. However, my right colum is showing up below the left column rather than to the right of it. See it: http://www.brohawk.com/brohawk_v2/ Why is that?

Posted by: rob house

2012-01-31T13:00:49+00:00

The end result looks nice, although the layout degrades inelegantly at very small browser width. However, if this is the type of coding we now have to do in order to do what was once a rather simple table layout, then I think this is indicitive of a major and fundamental flaw in the CSS spec. There is no real advantage of doing a 3 column layout in this manner... I would still do this as a basic 3 column table. I understand the desire to get rid of using tables for layout, but the alternative dreamed up by the w3c etc. is not an improvement. Using float and negative margins for this type of layout is a fundamentally flawed flawed concept and I will not adopt this method while the tables method is still superior to it, degrades better, works cross-platform, and is simpler to code. Rob House

Posted by: Adam

2012-01-31T13:00:49+00:00

This article is great, you've been a big help!

Posted by: Meitar Moscovitz

2012-01-31T13:00:49+00:00

Mr. Brill, I'm a huge fan of your work and negative margins are something I'm only vaguely familiar with so maybe I'm just missing something here...but.... One of the advantages this method claims to be boasting is that the source order is flexible. But, because of the nature of floats that you're using here, isn't that just not true? I mean, in the three-column version at least, the left-side content MUST always be placed first in the source, no? THEN the content column, and LASTLY, the right-side column. What's so flexible about this? I admit the effect is beautiful (IMHO, it would be better if a min-width was applied somewhere) and the ability to size and style each column seperately and arbitrarily is nice. However, in an ideal world I'd like to be able to arbitrarily place the content and the side-bar markup in whatever order I see fit in the source, period, and always be able to display them appropriately, and style them just as arbitrarily in terms of size and other styling effects. Absolute positioning offers such a solution (doesn't it?), and though it comes with its own set of problems, it offers the real flexibility that I'm looking for. Is an effect you're trying to create not possible with absolute positioning, or is it the point here that CSS-Positioning is NOT used, but rather floating is used in place of said positioning? Or maybe because it's 4:10 AM and I've got a cold is making me less-than-able to understand what should be a simple concept? Please enlighten me. I am currently very confused.

Posted by: Pat

2012-01-31T13:00:49+00:00

I'd like to use this solution but split the center content column into two equally sized columns. I tried a few things and couldn't get it to work. Any thoughts?

Posted by: Dante

2012-01-31T13:00:49+00:00

"Of course, if we would have wanted the sidebar on the right, we would simply have to change the floats and margins to their opposites." Should read "Of course, if we would have wanted the sidebar on the left, we would simply have to change the floats and margins to their opposites." The sidebar is already on the right.

Posted by: Kent Cabreira

2012-01-31T13:00:49+00:00

I find this to be a huge problem with CSS. I agree with Rob House; there's got to be a better way. Essentially, you need an additional 5 divs in order to make the original 5 divs line up correctly. I am all for web standards, usability, and the such. But I find that I spend more time trying to trick things into working � in order to validate � instead of getting a job done. I've got a lot more to say in regards to this, but since ALA and Zeldman (bought your book dude!) don't respond to these and don't bother trying to make things work properly � just find tricks to make their opinions work � tables will still rule. Why do tables rule? Well, there would only be 3 rows and 3 columns to make this work. Another advantage you ask? Well, instead of an additional 5 tables to get 'faux columns' to work, the table cells would automatically expand to the size of the largest cell in that row. Now what could be simpilar. Be damned stupid web standards that make more work. Be damned you non-WYSIWYG idiots. What do you think designers are: programmers? Should graphic designers go back to teletype machines, just because some moron thinks it is a better standard? Oh, oops! I was supposed to quite a paragraph earlier.

Posted by: Kent Cabreira

2012-01-31T13:00:49+00:00

Oh brilliant ones: What happens when the sidebar is longer than the content area? The content area doesn't 'faux column' all the way down to meet the side columns, like a table would.

Posted by: Georganna Hancock

2012-01-31T13:00:49+00:00

I'm having several problems with this layout, simply trying to implement the two-column version. First, using an image for even one column background breaks the liquidity. Secondly, in IE6 the right column (as illustrated) does not have the colored background unless the image is added to the sidebar specs. Thirdly, this is NOT the faux image background fix--that requires an image for the entire page. This fixes nothing if the content of the sidebar is short. Sigh!

Posted by: Jonathan Cole

2012-01-31T13:00:49+00:00

If you need a tilable background image then this is fine. One thing I've tried is getting this to work using just a background colour: As mentioned by Mezzoblue use the .clearfix from www.positioniseverything.net (so you don't get a "padding effect" just before the footer. You can then remove the css for the background images and just colour the #container the colour you want the sidebar to appear. I really found this article helpful ;)

Posted by: Niall Guerin

2012-01-31T13:00:49+00:00

This is exactly what I was looking for. I'm an IT student and have been only getting up to speed on web standards recently and wanted a good example to illustrate decent looking CSS layouts. Really appreciate the article.

Posted by: Jordon

2012-01-31T13:00:49+00:00

Thanks Ryan, it has been a great help.

Posted by: Satan

2012-01-31T13:00:49+00:00

"This would normally be a very simple process, but we are changing things around a bit because we want our source code to be structured in a certain way." It would have been nice if you started off with the "very simple process" and built from there. Most of the posts from people here say they previously couldn't get a solid column layout working properly, not that they already have a solid column layout and couldn't figure out how to get the content to come first in the source.

Posted by: nikki

2012-01-31T13:00:49+00:00

I'm having the same problems as brohawk, with my right sidebar living below my left content. My css looks the same and my content is before the sidebar in my html. I'm not looking for CSS help, just some insight as to what small things could force a floated div down? I'm afraid my head isn't 100% CSS compliant.

Posted by: Dave

2012-01-31T13:00:49+00:00

Has anyone else here noticed that these examples work great in windows, but still overlap in Firefox for FreeBSD, and I am assuming linux as well? Anyone tried this on a Mac?

Posted by: JakeZA

2012-01-31T13:00:49+00:00

I made this site for a search engine company a while back, look at the source an how the content shows up first, also it works in ie and firefox. Im doing this tutorial now to see how I can improve.

Posted by: JakeZA

2012-01-31T13:00:49+00:00

http:www.webscore.com.au/

Posted by: dise�o web

2012-01-31T13:00:49+00:00

congratulations for the article.

Posted by: Aiden

2012-01-31T13:00:49+00:00

Even in my fixed-width page, this solution paired with the faux-column spacer was a lifesafer in both CSS and in increasing compliance with non-styled display. Great work, as always. ALA is the greatest! :)

Posted by: Vilppu Tilli

2012-01-31T13:00:49+00:00

I reallly appreciated the excellent explanation of using "div" to layout a page. This is a really clever "almost Perlish" way to use CSS and the properties of div to control layout. And of course there are browser bugs to work around. However, what if you dont wanna float, what if you need a fixed layout so you can slop in some "pictures"..... with a fixed width table layout. the browser will add scroll bars whne the window is too small and the design basically remains intact. It seems to me that the div element is being exploited in the same fashion as "tables" to conrol page layout. The only difference is that the tables can be fixed widths. I usually "present" images of paintings or photographs or other art work with _some_ text content. I am currently working on a site where I need a five cell row in a 20 row table to present the "thumbnails". a bit of a real challenge to do it with div and a stlyesheet. reggers, v

Posted by: kumar

2012-01-31T13:00:49+00:00

Tried the code to the T. but found out that opera and i.e.6 makes a mockery of the same. it only proves that design and brower compatibilty will be at loggerhead.

Posted by: Katy

2012-01-31T13:00:49+00:00

Is there any way to make this work without using a background image?? I am trying to change the backend coding of a client to XHTML and use divs for a three column content. I need them to end together. Additionally, it is for a blogging service that allows users to define the colors of their columns - Image use is an impracticality! How do I allow free reign of the user end without demanding images, and still have the columns end together? I am baffled!

Posted by: Tom L

2012-01-31T13:00:49+00:00

I mean really, who needs that new fangled internal combustion engine thing. We've all gotten to work by horse-drawn carriage before. It works. Why change now?

Posted by: Claire-Lise Braun

2012-01-31T13:00:49+00:00

Was it ever... I used this technique on the Band Aid Dilemma site - http://www.bandaiddilemma.net/, not had any complaints yet and we're getting 1000s of visitors :) Ms Cloudy