Multi-Column Layouts Climb Out of the Box

by Alan Pearce

140 Reader Comments

Back to the Article
  1. It never ceases to amaze me how fervently the folks who want to do it the easy and familiar way (i.e. tables for layout) impugn doing it the standards-based way.

    It’s true that there is no explicit rule against using tables for layout. But it you can create your layout without tables, you gain some great benefits including: a more flexible design that is easier to maintain and change, a smaller file size that saves space and bandwidth, and if you markup your content semantically, better SEO and accessibility.

    Another benefit is derived for database-driven dynamically generated sitees. It takes less processing time to generate the simple markup of a CSS-based layout than crunch through multiple layers of nested tables.

    The only justification the tables-based advocates can give for using tables is that it’s easy and it works. That’s true. But if I’m interviewing you and the only work you produce is tables-based, I’m not going to hire you.

    Copy & paste the code below to embed this comment.
  2. Might be true, but we are not talking about HEAVILY nested tables here, just a simple one-row table with two cells for the main layout and basta…

    Copy & paste the code below to embed this comment.
  3. There’s no need for namecalling. How about some lovin instead?

    Some people have to use tables, some people refuse to. The people who don’t use tables are generally doing it for philosophical reasons which will eventually advance the field we all work in.

    The people who use tables are generally working under a budget, a time crunch, or a mountain of frustration.

    Both sides of this debate generally have good, solid reasons for what they do. So leave the evangelists alone, because their perseverance will make our jobs easier and better one day. And leave the tables guys alone, because they’ve got clients and companies they’re accountable to.

    Now christos, come here and give ‘Htmler Tabler’ a big hug. Thats right. Now you two go and have a good time. Crazy kids. So cute.

    Copy & paste the code below to embed this comment.
  4. Use tables for layout if you want but shutup! I “grew up” with HTML tables back in the 1990’s when getting tables to work with the various browsers really did matter and really was hard work. My first CSS project to do layout without tables was very hard but I’m glad I went through it and I wish we’d had CSS earlier even if it is quirky and browsers have to put up with table-based layouts. As far as I’m concerned – the less ML of any kind we have the better.

    Back to the article: for those coming to CSS with a table layout approach this will be a godsend.

    Copy & paste the code below to embed this comment.
  5. “But if I’m interviewing you and the only work you produce is tables-based, I’m not going to hire you.”

    I don’t think anyone here is talking about using tables exclusively; the work I produce is 99% CSS for layout. But in those circumstances when you get to the point where you’re spending 6 hours trying to get CSS to do what you want, it’s a little irresponsible not to be practical. It’s hack A vs. hack B.

    After all, who isn’t working under a budget or a tight deadline?

    Copy & paste the code below to embed this comment.
  6. First of all nice work done with the CSS.

    It does take some time to get something like that to work.

    I change at present time my website over to a similar CSS approach. It is attapted from Dirk Jesse, he calls his approach YAML (yet another multicolumn layout). It does not use Javascript.
    The beauty about his approach is that it is backward compatible and useable with older browsers. It takes very much in consideration any kind of browser available.

    Not everyone is using the latest browsers like us.

    When one starts to use an approach like you did, the older browsers start caughing up very fastly and the results are not that beautiful and then a lot of hacking has to be done, but even the new browsers are handling CSS sometimes differently.

    I also believe that a flexible layout is the future, which means one defines a min and max width, so the user regardless, if he uses a 15inch sreen or a 24inch screen gets the website in a nice way presented.

    Copy & paste the code below to embed this comment.
  7. Never thought that this would happen again. Welcome to the year 2007, folks. We have a layout-tables vs. CSS discussion. Again. Thanks, “Reid”:http://www.alistapart.com/comments/multicolumnlayouts?page=4#33, for clearing it up.

    Please, let’s get back on topic.

    I haven’t been convinced by any of these solutions, and this includes this new article.

    I am also not convinced there is a need for three-columns-layouts on the Web. Not because it is hard (or impossible?) to make them work with CSS alone, but because I simply think, well, there is no need. I don’t like it when my eye gets disoriented by too much clutter on the screen.

    But then again, I produced websites under the label “puredesign”. There’s no accounting for taste.

    Copy & paste the code below to embed this comment.
  8. strong>Negative values for margin properties are allowed, but there may be implementation-specific limits. (CSS2-Ref-8.3)

    So, negative margins is valid syntax, but unspecified behaviour. It will require a W3C official to convince me of something else. Sorry.

    Thanks for the links to http://layout.constantology.com (IE7 needs a rounding error fix) and YUI grids.

    Copy & paste the code below to embed this comment.
  9. … full height columns?

    three columns equal height is great, but for me ‘the holy grail’ has been the equal 100% height, flexible centre, 3 column layout, containing image backgrounds.

    we had one, and then ie7 came along and messed it all up.

    Copy & paste the code below to embed this comment.
  10. stuff like this makes me even more impatient while waiting for multiple, resize-able background images.

    Copy & paste the code below to embed this comment.
  11. stuff like this makes me even more impatient while waiting for multiple, resize-able background images.

    Copy & paste the code below to embed this comment.
  12. and border images

    Copy & paste the code below to embed this comment.
  13. I’ve been dealing with liquid layouts a long time, and yes, this IS a solution, but what about the navigation order? It’s more natural to have the link index (usually on the left-side column) first than have the center column (the page content) at the top of the page.

    Think it as a non CSS page, or disasble CSS on the browser to see what I mean, navigation without an index really sucks.

    Anyway it still is a browser HTML rendering issue.

    Copy & paste the code below to embed this comment.
  14. when you really think about it, there’s a lot of overlap between what css does and what javascript can do. I heard once of a script that let you target elements in the DOM via css syntax in Javascript. I think that’s brilliant. But I also think a few more useful things need to be taken from Javascript and added to CSS to make them more user friendly and javascript independant.

    I’m sure If I really had to I could figure out how to use JS to make columns the same height

    Copy & paste the code below to embed this comment.
  15. Regarding the elastic layout…

    When you reduce browser width, the columns overlap each other, rendering the content illegible. How is this a valid solution?

    Copy & paste the code below to embed this comment.
  16. People, stop blaming CSS for the things only IE cannot do.
    CSS has nice display: table-* properties, and decent browsers do support them. Some even support CSS columns. Some – multiple background images.
    If you love tables so much, why dont’ you marry them? :)

    Copy & paste the code below to embed this comment.
  17. @Rimantas: Even with display:table we’d have to change content order for presentation’s sake. And there’s no CSS equivalent of spanned cells.

    @Andrew: Giving BODY a min-width should cure the column overlap.

    Copy & paste the code below to embed this comment.
  18. I have used JavaScript to lengthen my columns, and it works beautifully. Better than hacking up my CSS to hell and back. Choose your sacrifice.

    I’m not going to add hacks to my CSS because (maybe) 1% of my market doesn’t have JavaScript enabled. Do some market research before adding CSS hacks. You may find that your audience uses newer browsers.

    Copy & paste the code below to embed this comment.
  19. Genius, but I prefer the javascript as well. I like that I can style my columns to any degree. With javascript disabled, you’d just get a shorter column, which is a nice clean degradation.

    Copy & paste the code below to embed this comment.
  20. The comment I’ve appreciated most in this whole discussion is the person who questioned the utility of three-column layouts at all.  Many people have nobly sought to demonstrate time and time again that CSS can do everything tables do, but you know what?  That’s a secondary issue.  The primary issue is that standards-based layouts can do tons of things that tables can’t.

    Having a meaningful, simple XHTML page underneath things has saved me (and my clients) hours and hours and HOURS of time over the years, adding up to thousands of dollars.  By being able to use CSS to make XHTML do tricks, I deliver them money in the bank.  By providing them exactly the kind of liquid n-column layout a designer thinks is snazziest, I deliver them something of much more limited, even highly questionable benefit.

    I’ll challenge a design that requires a particularly difficult layout before I’ll ever switch to a table for layout.  Why?  Because I shouldn’t expect the client to understand how vastly important it is to separate content from presentation—the client is paying me to know that, and to keep them from making such a costly mistake.

    Copy & paste the code below to embed this comment.
  21. Ive been using the Borders trick in my site.. I’m not a professional web designer (not evne designer), but I saw the idea in a CSS tutorial site and it just works!, happy browsers!

    this article and comments are great for learning!! thanx!

    Copy & paste the code below to embed this comment.
  22. Interesting, but still not 10% as good as table would do.

    Copy & paste the code below to embed this comment.
  23. Would appreciate if anyone could find any problems with what I have tried on my site: http://www.4w.co.uk/

    Copy & paste the code below to embed this comment.
  24. …exactly the same technique…
    http://www.cssplay.co.uk/layouts/3cols2.html

    circa 2004

    Copy & paste the code below to embed this comment.
  25. My problem with all the clever CSS tricks is that they depend on browsers to have sophisticated CSS support.

    What about browsers found in Smart Phones and PDA’s (a huge potential market in the coming years) ?  Apple will be rolling out the iPhone with some variation of Safari. The TREO uses a browser called Blazer.  The RAZR phones use some un-named browser.

    I’ve found these to very un-sophisticated in their CSS support.  Tricks likes this will never work.  If you want “real” cross browser support for simple page layouts – Stick with tables.

    Copy & paste the code below to embed this comment.
  26. I have just encountered a design, perfect for this. Implemented it today, works exactly as required by client.

    Copy & paste the code below to embed this comment.
  27. Until border images are a real thing, you can’t use a real, full-column height image for the rails, but you can potentially get something like it. If the rail content has a background image that is short enough to never exceed the smallest potential height of that column, it can be positioned at the top of the column (alternatively, min-height can work here in some situations). So, for instance, you can have an image that fades into the background color positioned at the top of the column to at least apply a little visual separation where it matters the most.

    Copy & paste the code below to embed this comment.
  28. Insert subversive article here:
    “Coming Back to the Table”:http://banksand.googlepages.com/comingbacktothetable

    Copy & paste the code below to embed this comment.
  29. Re post #4: Whitespace between columns can be done very easily. See: http://alttag.org/?p=11

    Copy & paste the code below to embed this comment.
  30. Regarding the cssplay technique mentioned in post #54 and elsewhere, I had not seen that prior to writing the article. I kinda wish I had. It would have saved me some work. The techniques presented there are very similar to mine, but not exact. If you look at the source, you will see the content is actually last, not first. He also uses an empty clearing div which mine does not.

    Copy & paste the code below to embed this comment.
  31. In this case I’d use table without thinking even 1 sec.
    HTML code would be more clear and “direct”.

    Copy & paste the code below to embed this comment.
  32. Congrats! You’ve managed to create a CSS layout with code that’s more complicated than using a simple table structure. And your CSS looks like more code as well. Tables aren’t evil, used properly they can be helpful. We’re perhaps getting a little hung up on ‘no tables at all costs’. Tables are valid code, and they work fine with screen readers for the vision-impaired.

    Copy & paste the code below to embed this comment.
  33. Tables, used properly, are perfectly accessible. Let’s stop saying tables-based layout versus standards-based layout, as if using a table makes your website stop working with a screen reader. I’m also not talking about some idiotic nested GoLive tables mess. Why do CSS folks assume a table-based layout has to be nested six deep? The most complex design shouldn’t need more than one nested table, and a good combo of CSS and tables can usually keep it to one simple table. Why not take the best of both worlds? At least until CSS-P is less flaky.

    Copy & paste the code below to embed this comment.
  34. The problem with tables is simple: one day your client comes and says that he no longer want three-column layout, he wants a two-column layout with the third column stacked into the second one or into the footer. And then you grin like a madman and start converting your 300+ pages with tables in them.

    Of course, this is less of an issue if you generate your pages dynamically server-side and have access to the templates or code. Actually, I think we woudn’t even have templates in web applications if only CSS was introduced and adopted a little bit earlier.

    Copy & paste the code below to embed this comment.
  35. ——-

    And then you grin like a madman and start converting your 300+ pages with tables in them.

    ——-

    I’ve done redesigns on both ends. It’s the same amount of planning work, the same amount of design work in Photoshop (I hope you’re not ‘designing’ a site in a code editor, ‘cuz that ain’t design. Design starts with a pencil and a piece of paper.

    Once your design concept is done, you have to figure out how to implement it with tables or CSS, or a combination. So you spend time figuring out the layout in CSS, dropping in new content, styling new content elements, getting rid of old ones, etc. Or you code your new table layout and swap in the new code across your pages with a simple find/replace.

    In theory, in made up examples like the one above, CSS is faster. Experience in the real world has shown me there’s not much difference. What really saves time is proper planning, so your client doesn’t come back to you asking for major changes all the time. Measure twice. Cut once.

    Copy & paste the code below to embed this comment.
  36. How would you modify the 2 column layout with headers and footers, in order to automatically vertically strectch to screen height?

    Copy & paste the code below to embed this comment.
  37. The CSS for “3ColLiquidWithContent.html”:http://www.alistapart.com/d/multicolumnlayouts/3ColLiquidWithContent.html breaks in IE 7:
    “screen capture”:http://rentechie.com/other/break.gif
    The HR between the articles is behind the first article, and the borders just get all sorts of interesting.

    Copy & paste the code below to embed this comment.
  38. Thank you for the great job you’ve made!
    Russian translation of your article can be found here:
    http://web-log.ru/?p=96

    Copy & paste the code below to embed this comment.
  39. The problem I have had with all solutions of this genre is that the columns start to overlap when you minimize the width of your browser too much.  Even the examples do that, both in IE and FF.

    This looks very unprofessional, despite the fact that most users will not ever minimize that much.

    And 30 years of hard-core development have led me to believe that all corner cases should work.

    The solution would be to try and figure out a way to implement a min-width on the page, so that you can avoid squishing the liquid column into others at the extreme.

    Problem is that I haven’t found a way to do that in IE.

    Anyone else had any luck with such an approach in IE?

    Thx!

    ….Andrzej

    Copy & paste the code below to embed this comment.
  40. My own work using this method: “Skidoo Redux”:http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/

    Compatible back to IE 5.0 on both Mac and PC. Lots of comments. Hacks are separated in the CSS so they’re easy to find and manage.

    Copy & paste the code below to embed this comment.
  41. Nice POC, though I think its worth nothing as a production technique.

    I’d rather apply a vertical tiling background image and adjust the columns size via scripting (trivial though useful) than just not using anything aside BORDERS.

    Copy & paste the code below to embed this comment.
  42. I like this implementation for three column layouts. The only issue I have found is that in IE7 when you zoom in on the page it continues to shift right. IE6, FF stay centered. What is going on with IE7?

    Thank you

    Copy & paste the code below to embed this comment.
  43. Just to clear up a point raised early in the discussion (“Unintended Consequences”, Feb. 6, and sorry if I missed where someone else aready did):

    “Unlike margin properties, values for padding values cannot be negative.”
    (From http://www.w3.org/TR/CSS21/box.html#padding-properties)

    Negative margins are perfectly fine and not at all “unintended” by W3.

    Copy & paste the code below to embed this comment.
  44. I don’t know why people feel the need to pipe in with “my solution using tables is easier/better/more compatible.”  The author was very clear he was trying to avoid tables.  That was the author’s intent.  To point out that tables can do the job is counterproductive and childish.
    You wanna use tables?  Great—don’t bash the work of people who are trying to do other things.  From a standpoint of working with other people’s code, I’d rather see well-formed css because while a single nested table might be okay to work with, anything beyond about 3 gets nasty.
    The thing is, I see a guy walking down the street eating an orange, I don’t go over and clobber him on the head with an apple to convince him of my fruit choice; generally I mind my own business about matters that don’t concern me.  The people piping in with “tables do this better” are doing something analogous IMHO.
    Just a point about civility in discussion, ya know?

    Copy & paste the code below to embed this comment.
  45. Is this really any more useful than “Liquid Layouts with Negative Margins” – http://www.alistapart.com/articles/multicolumnlayouts/ ??

    Also there seems to be no mention of this in the article but forgive me if I’m wrong :)

    Copy & paste the code below to embed this comment.
  46. Please stop bashing. As other dudes have said – the idea was not to use tables but also – using tables is WRONG. Semantically, using tables for this is WRONG. Tables are for TABULAR DATA, thats why they’re called TABLES.

    Copy & paste the code below to embed this comment.
  47. Suraj, I get it. But the tables comments are valid here. I like CSS, but if you stand back and consider it objectively, it is ridiculous that it is this hard to deliver a multi-column layout with CSS. We need better design solutions. Also the accessibility guidelines as I remember them say it’s fine to use a table for layout as long as the table makes sense when linearized, which is easy. I still have to use tables on some projects, and we’ve tested in screen readers. The sites work fine, pretty much the same as a pure CSS site actually. Gasp!

    Copy & paste the code below to embed this comment.
  48. Those talking about tables for this layout: you might be saving time (and the clients money) in the short term, but what about the next update or redesign?
    The flexibility that css positioned layout is far more valuable than a quick table fix.
    Heck, javascript before tables even. Tables should only be chosen instead of sudden death.

    Copy & paste the code below to embed this comment.
  49. The reason I did this is without tables is the requirements said it had to be done without tables. It’s that simple. Tables were not an option. Even if they were, and it was discussed, another requirement said the main content had to come before the rail content in the source because it was more important the the rail content. This is for screen readers and users without CSS. Try to do a left rail layout but the content is first using a table. This has the content first and I can put the rail anywhere I want. You can’t do that with a table.

    To those that say the CSS is to complicated when you could just use a table, do you still use the center tag? It is not nearly as flexible bit it is much easier that centering with CSS.

    To post #71, as was pointed out in the article, a background image would not work due to the elastic requirement.

    Copy & paste the code below to embed this comment.
  50. Well, Alan

    pointing out the ONLY shortcoming in tables (not being able to re-arrange the column order) does not eliminate the many problems with your technique. I can think of at least afew obvious ones:

    1. No tiling background images for your side columns
    2. No easy linup of different-colored bottom borders for your columns
    3. No way of emulating the “rowspan” and “colspan” features in tables, especially if their use is accompanied by the addition of borders and background images

    My point? Both methods (tables and no-tables) have drwabacks, but when everything is weighted, tables offer a more robust solution to what should be a simple problem.

    Do a little “thinking out of the No-tables box” yourself: don’t you see something VERY wrong when you have to use BORDERS as CONTAINERS?

    The “no-tables at any cost” mentality has reached its lowest point…

    Copy & paste the code below to embed this comment.
  51. gasp … no tables?

    Man have i got a lot to learn…

    How would you, then create a table like this?

    ————————
    |    |    |  |
    ————————
    |        |  |
    ————————
    |  |  |  |  |
    ————————

    … just a crazy example… but css is the way to go?

    Copy & paste the code below to embed this comment.
  52. 1. This shortcoming was pointed out in the article.
    2. I am not sure what you mean with this one.
    3. If you are using rowspan and colspan in layout tables then you are completely abusing using tables for layout.

    The borders are not used as containers, just a way to provide a background color of full height. The containers are div tags.

    Not being able to rearrange columns is the ONLY shortcoming I mentioned because it is the ONLY one that mattered. There are many others but I would be wasting bandwidth trying to re-explain what has already been explained in this discussion and elsewhere. If anyone is dead set on using tables for layout, be my guest. No one is forcing anyone to use this. This just provides an alternative for those of us who choose not to.

    Copy & paste the code below to embed this comment.
  53. Your last sentence perfectly describes the problem with your approach:

    “If anyone is dead set on using tables for layout, be my guest. No one is forcing anyone to use this. This just provides an alternative for those of us who choose not to.”

    YOU are the one bent on using just ONE method, for no apparent gain. I, on the other hand I advocate a better strategy: use whatever fits the job at hand, and it has been VERY clear for several years now that 3-column layouts are not practical without tables; the amount of acrobatics needed to emulate default table behavior & appearance is just ridiculous.

    I think it is pretty dim to avoid tables for the sake of avoiding them; once again, it’s time for you to follow your own advice: think outside the “no tables” box for a second. You might see the sun.

    If my advice is not convincing enough, you might want to ask Zeldman himself the reasons for using a table here:

    http://charlottegraymovie.warnerbros.com/cmp/main.html

    Perhaps he knows something you don’t? Hint: tables are ok when needed, and NO, the site is NOT that old; it was built way AFTER the “no-tables” crusade…

    Digest that one, my friend…

    ^^^^^^^^^^^^

    As for “abusing tables for layout”: you sure wrote that with a ski mask on, didn’t you? I’m assuming that’s the case because accusing people of “abusing tables for layout” after all the CSS acrobatics and plain semantic butchery in your article certainly requires the use of a mask, my dear kettle.

    By the way, if using rowspan and colspan is “abusing tables for layout”, then what, in your opinion, would constitute “NOT abusing tables for layout”? Is it possible that you are, perhaps inadvertently, leavig the door slightly open to the possibility that tables may, after all, be used for layout?

    Lastly, while we are on the topic of table use and abuse: what are the rules for using rowspans and colspans? Are those “thingies” forbidden fruit? Illuminate us, the unwashed masses, please. I stand in front, humble and table in hand, waiting to see the light…

    Copy & paste the code below to embed this comment.
  54. The problem I have had with all solutions of this genre is that the columns start to overlap when you minimize the width of your browser too much. Even the examples do that, both in IE and FF.

    This looks very unprofessional, despite the fact that most users will not ever minimize that much.

    And 30 years of hard-core development have led me to believe that all corner cases should work.

    The solution would be to try and figure out a way to implement a min-width on the page, so that you can avoid squishing the liquid column into others at the extreme.

    Problem is that I haven’t found a way to do that in IE.

    Anyone else figured out how to impose a min-width on the centre column in IE with some sort of hack?

    Thx!

    Copy & paste the code below to embed this comment.
  55. Tell me why you cant just use tables instead?  seems like a lot of work just to get divs+css to mimick tables.

    Copy & paste the code below to embed this comment.
  56. Just read some of the comments, disregard my previous comment about using tables.

    Copy & paste the code below to embed this comment.
  57. There sure are a lot of anal people commenting on this article.  Get off your high horses and take a step back.  If you want to use tables for layouts, go for it, if you prefer css, more power to ya.  I don’t think its right for people in here saying its “against the rules” to use one versus the other.  Whatever gets the job done, thats what matters. 

    I personally prefer using tables simply because I have more experience with it and I feel like I have more control about where things go.  As for divs+css, I find myself falling into to css-hell when trying to debug layout issues.

    Just my 2 cents.

    Copy & paste the code below to embed this comment.
  58. Wow! Lots of CSS versus tables comments here. I said this in a previous comment, but I like CSS. The problem with the CSS movement is ‘generally’ the wrong arguments are being put forth for why it’s good. Tables can be used for layout, if used correctly, it’s not invalid code to do so and it’s also not against web standards to do so. What’s good about CSS is that it can offer more design freedom. But the CSS-P community should communicate better arguments.

    One I hear all the time is how much time CSS saves when you’re working on a new site design. That’s a crock. You still need to plan. You still need to sketch. You still need to fire up Photoshop and Illustrator, etc. You still need to take photographs and source images. You still need to write content. Then, when all that work is done, you get into production, which I can tell you from real world experience is roughly the same for either method.

    Bandwidth savings is also malarkey. The ‘size’ of any web page is overwhelmingly the graphics used in its production, not the code.

    I could go on. But in my opinion the way to get designers to adopt CSS-P is to talk about the positive aspects of what CSS offers, and not to ‘table bash’, especially when the bashing is incorrect (as much of it tends to be).

    Copy & paste the code below to embed this comment.
  59. My problem with the CSS solution is that it needs to be recoded for each time using it. I have created a combined CSS / javascript solution which aims to allow easy reuse.

    It is available from: here
    (open html/equalize-height-example.html in browser)

    X HTML source example: click here

    Copy & paste the code below to embed this comment.
  60. Although retrospectively I am a zealot of no-tables layouts, using ONE table to achieve the equal height columns doesn’t seem such a heavy sin. What I really hate (and I yet didn’t make a decision about what method to use) is that tables don’t have a 100% height with a XHTML 1.1 DTD. I want that DTD! Ok…,fine… let’s asume is valid Transitional, that’s good to, not a deadly sin either. But… try to absolutely positionate with respect to the table. It doesn’t work in Firefox…(it will positionate with respect to the body not the <td>) That is what bothers me most.
    Some unpleasant thing about tables is the multitude of nested tags (inside one single table I mean). With that kept in mind… 2 nested container divs and 3 more divs for content inside the first 2 is like using A table, seriously. What I really aim is to have separate div elements for header, footer, left column, right column, center column and equal heights too. Not a single nest between these ones (no problem inside them otherwise).

    Copy & paste the code below to embed this comment.
  61. I’ve been reading posts and tips here since 2002, and never wrote html, only xhtml 1.0. I use the tonico 3col em layout here:

    “Flowerchild”:http://homepage.mac.com/caroledanforth

    His sample looked great (probably because he used trebuchet and dotted borders – I liked it) so I went for it. I’m happy with it, I hope. I haven’t seen my website in many browsers. It’s looks okay in Mac Safari and Firefox. It has more div layers than this example. Now that I have a fixed width amazon astore on one part of my site, the em expand is not good for that area. I’m just living with it because I’m afraid to change part of my site to px width.

    I frankly got lost a long time ago on the point of overflow:hidden (because IE messes up on italic text or long links?) I have to agree that many of us are in over our heads with all this. You do have to be a magician with six browsers to be aware of all the issues. The Apple Developers Safari area actually advises using a table with 3cols, header, and footer for page layout. They simply remark that it works. Maybe they’re right. Anyway, I could care less about 100% screen height. I just don’t want the third column to fall below. And all the negative margin layouts tend to seem like abuse brought on by IE. A “negative margin” is nonsense, but it’s the only thing that works. Meanwhile, I’m tired of hearing “tables vs. css”. That’s misleading and confusing to many readers. Back in 2002 I at first thought that tables were some kind of illegal css. Tables CAN be styled in css.

    Anyway, it occurs to me that a lot of this effort is also us standing on our heads to please search engines. When I began, I had a simple blog, which I now have little time to write in because of Technorati, local sitemap, Google Sitemaps and rss, all of which I have to update by hand. All of which have issues. I ranked higher in 2002 with a table layout, no sitemap, etc. Tell me why. Or no, I’m just here on a coffee break I’m giving myself.

    Over and out.

    Copy & paste the code below to embed this comment.
  62. “Tonico 1-2-3 col layout”:http://webproducer.at/flexible-layout/

    By the way, I really like the instant Comment Preview here.

    Copy & paste the code below to embed this comment.
  63. In my tests, this method works well with recent versions of Opera, Mozilla, Firefox, and IE 5.5 and higher.

    It failed with Netscape (footer comes toward top of page and side columns have no background color) and IE 5.01 (left column covers center column).

    I also had to add a height to the footer div’s css to prevent the footer from separating from the container div in IE 7.0.

    Who knows? Maybe there are easy fixes for IE 5.01 and Netscape, too.

    My sites still get a number of visitors using IE 5.0, so for now this isn’t feasible for my use. But in a year or two it might be a useful tool.

    Copy & paste the code below to embed this comment.
  64. I’ve been doing some practice with this design. The following addresses some issues in IE 5.01 & IE 5.5. Haven’t been able to simulate min-width on it. Word-wrap helps on long URLs.

    <!—[if IE 5]>
    <style type=“text/css”>
      #header, #footer, #container {margin: 0;}
      body {padding: 0; word-wrap: break-word;}
    </style>
    <![endif]—>

    (Hope it hasn’t already been suggested .. got sick of wading through the tables v CSS stuff…)

    Copy & paste the code below to embed this comment.
  65. ah… the width expression makes a min-width in IE…

    <!—[if IE 5]>
    <style type=“text/css”>
      #header, #footer, #container {margin: 0;
      width: [removed]document.body.clientWidth < 600? “600px”: “auto” )}
      body {padding: 0; word-wrap: break-word;}
    </style>
    <![endif]—>

    Copy & paste the code below to embed this comment.
  66. I’ve tried all the equal height column methods (that I know of, maybe 4 or 5?). This is a pretty strong method if you want to background color in your column, but if you just want a 1px line (which i do a lot) with flexible content, it won’t really work.
    i used to live by padding-bottom:3000px; margin-bottom:-3000px; until IE forced the columns to collapse. I’ve used the faux method VERY briefly, but i feel like it’s almost a waste of css to use an image like that.

    I settled on using javascript to force all columns to be the same height. based on analytics I’ve collected, about 99% of users have javascript enabled, so that’s not really an issue.
    the drawback of using this method is for people who resize the text (ctrl+) -> the columns won’t resize and the text will run off the page.
    but if you give a click-option to resize text within the page you can avoid this, provided it gets used.

    but I also only use equal height columns when force, else I avoid them at all cost.

    I don’t like relying heavily on javascript, but equal height columns are tricky to get a global solution.

    I SHALL RETURN WHEN I FIND ONE!!

    Copy & paste the code below to embed this comment.
  67. I didn’t see the point of playing the fake-margin game.

    Why not just use percentages to make the column containers snap into place.  No tricky hacks, no bs. 

    Simple arithmetic. 33% + 33% + 33% = 100% 

    HTML
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    <div class=“col3s”>
    <div class=“col3”>
      <ul>
      <li></li>
      <li></li>
      <li></li>
      </ul>
    </div>
    <div class=“col3”>
      <ul>
      <li></li>
      <li></li>
      <li></li>
      </ul>
    </div>
    <div class=“col3”>
      <ul> 
      <li></li>
      <li></li>
      <li></li>
      </ul>
    </div>
    </div>


    CSS
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    /*3 Column Text Block*/
    .col3s {
    position: relative;
    width: 100%;
    height: auto;
    float: left;
    display: block;
    margin-top: -15px;
    }
    /*Column Designator*/
    .col3 {
    position: relative;
    width: 33%;
    float: left;
    font-size: 72%;
    text-align: left;
    }
    .col3 li {
    list-style-type: none;

    To see it in action goto:
    http://www.jpasims.net/projects/index.php

    Copy & paste the code below to embed this comment.
  68. The final example with content seems to run into issue when I resize the width in IE 6.  The bullets in the Article 2 box jump into the content box for that article.
    http://www.alistapart.com/d/multicolumnlayouts/3ColLiquidWithContent.html

    Copy & paste the code below to embed this comment.
  69. Wow!! I read through all the comments, and I think only one person mentioned SEO
    I’ve read many articles on SEO, and they all say the same- tables is a bad choise if you want a good rank.
    I think that if you use tables for layout, you would have to spend alot of time afterwards showing the search engine spiders their way around your content…
    I also agree with some of the other comments saying that this is really the browser makers responsibility. It’s about time they tell their browsers to play nice and to use the same rulebook…

    Copy & paste the code below to embed this comment.
  70. Wow, what a bunch of useless non-sense about tableless CSS vs. tables design.

    Anyways, I’ve adapted this technique for a website because of the problems with OTL and anchor links. Everything works well enough and I haven’t seen any problems in the browsers I’ve tested. But I still like to know more information about which browser will break.

    Copy & paste the code below to embed this comment.
  71. Nice tutorial, but working with all of ie and firefox version?

    Copy & paste the code below to embed this comment.
  72. I have been using this method for awhile and want to implement it on some of my pages for my current site. Thing is that the background image will not repeat in the firefox browser but looks great in IE6. Is there some trick I am unaware of to get background images to repeat-y in that browser?

    Copy & paste the code below to embed this comment.
  73. I wish people would try shrinking their browser window (especially in IE 6) before posting their amazing discoveries here. Many of the solutions here show dropping text or, worse yet, overlapping text when the window gets smaller.

    Copy & paste the code below to embed this comment.
  74. I’ve been away from client-side Web dev for a while, and reading through all these comments has certainly been interesting. In a situation like this, where you’re trying to create a layout that looks like it was created with tables, maybe it would make more sense to use a table. The only real drawback would be that you can’t position the main content division right up under the <body> tag. But if you don’t care about that, maybe it would make sense to use a table.

    Of course, creating a boxy layout that looks like it was created with tables is really the crux of all this. For example, if you look at any of the 986 sample layouts at http://mezzoblue.com/zengarden/alldesigns/ I don’t think a single one uses “colored in equal-length” boxes. In fact, I can’t even remember the last time I saw a site that uses this kind of layout. (Though I’m sure there are plenty of them out there).

    On the shrinking browser window thing, that’s a dreadful excuse for using tables. There are plenty of ways around the collapsing columns issue without resorting to using tables for layout.

    Some other stuff got me to thinking that maybe it’s time for Web developers to stop making hacks for old/bad browsers. Adopt an attitude of “Hey, my page validates and looks fine in Firefox 2 and IE7. If it doesn’t look right in your browser, I don’t need to fix my page. You need to fix your browser”.

    Then again, perhaps I’m just being idealistic.

    And by the way, this is a cool way to do comments. Is this something ALA created? Or is this something I can buy and just drop into a site?

    Copy & paste the code below to embed this comment.
  75. Hmm … I’m trying to adapt this to a percentile size for the rail instead of “150 pixels or else” (on some resolutions and/or text-sizes, 150 pixels might be way too small). Unfortunately … it seems that borders really don’t like percentages for their sizes. Oh well.

    Copy & paste the code below to embed this comment.
  76. Is this really worth all the agony and effort?
    Elegant? Since when hack became elegant?
    A 2 or 3 col table inside a div is not going to break the page. C’mon! You’re not going to:

    - Raise a cow in your own backyard because you don’t trust the beef at your local grocers

    - Drive extra 15 miles to find a gas station that sells gas for 2 cents less per gallon

    - Photocopy all the pages of your neighbor’s newspaper to save subscription cost.

    Think about what it’s really worth.

    Copy & paste the code below to embed this comment.
  77. I don’t design web sites very often, but I have a couple to do now. As a law-abiding netizen my instinct is of course to follow every possible rule.
    But I was taught at Harvard never to have anything to do with negative margins.
    I am therefore working on a layout that uses negative tables. These allow special relative positioning or absolute superpositioning, with measurements in quems or quixels. They are completely undetectable by the CSS police.

    Copy & paste the code below to embed this comment.
  78. I felt I had to chime in here re. tables vs. css. In principle I agree with the ‘use whatever is easiest for the job’ idea; but does no-one else care about source-ordering? We find most clients care a great deal about SEO and you just cannot get a nice source-ordered document with tables. This is the #1 reason we have switched to CSS/div based layouts.
    So yes tables may be quicker, but for a real company’s site often they just aren’t good enough.

    Copy & paste the code below to embed this comment.
  79. honestly, this is exactly the solution I’ve been waiting (looking?) for, for ages! Thanks listapart!

    Copy & paste the code below to embed this comment.
  80. I have used this technique recently for a website and almost everything works well. I have also put a simple explanation as to how to achieve it at “Three column layout – Pearce Method “:http://www.latenightengineer.com/play/three-column-layout-pearce
    I hope it may help someone.

    Copy & paste the code below to embed this comment.
  81. I can’t get this to work in ASP.NET 1.1. Even the example breaks when I move the style rules into a linked CSS, and the HTML inside the <form> tag of an aspx web form.  This is what I get.

    Any ideas for fixing it? (No, I absolutely cannot change the platform or work outside of a FORM tag.)

    Copy & paste the code below to embed this comment.
  82. “This is what happens in ASP.NET 1.1 get”:http://www.acadrad.org/images/stuff/ala_liquid3b_aspx.jpg

    Copy & paste the code below to embed this comment.
  83. Hi.  I think this is a great solution to deal with three column layout.  I don’t have any negative thoughts about this, but I have a problem to solve.

    I didn’t see any problems when I created the template for the particular project.  Once I started putting content in each column, the left column sometimes jumps into the middle column.  It’s recognized in IE6.  It doesn’t happen always.  Here is the screen shot:  http://newsite.netatlantic.com/jumping-column.jpg
    The margin width of each side of the shell <div> matches to each column width. 

    I looked through the posts and don’t see anybody has the same issue as mine.  Do you think of anything to trigger this issue?  I want to know what I did wrong.

    Copy & paste the code below to embed this comment.
  84. I encountered the same problem with as Yukiko Tomosada. If the content is overflowing the #center, the #leftRail is moving the same amount to the right. It’s caused by the following declaration:

    #center{
      float:left;
      width:100%;
      margin-right:-100%;
    }

    as it is in percentage. My solution was declare overflow:hidden;.

    Copy & paste the code below to embed this comment.
  85. I know, I know, table layouts are evil. But sometimes there is just no better choice. Table elements are for structuring tabular data, I’have heared it hundreds of times. But you know, I prefer using a table to make columns instead of all those obscure css hacks.

    First, these are not standard ways of doing things, they are hacks; you’ve said it yourself, you have to “think outside the box” to find them. You had to think about unfamiliar, unfriendly and unintuitive code hacks to achieve a simple effect whitch can be easily done with a table and a few “normal” css.

    Second, by using a “hack” to layout your stuff, you lose the hability to easily change your presentation style. Try to put a background image to your columns : you will have to completely rewrite your css code. You won’t get all these headakes with a table.

    Third, using a floating div to make a column is not better than using a table to layout non tabular data. I mean, the float property is meant to be used in making an image float over some text. Ok, you can twist the original meaning of this property and handfully use it to achieve your goal, but, in my humble opinion, it is not better practice than using a table to layout non tabular data, even more, it IS also a semantic error.

    The real nice solution would be to use the “display : table-cell” css attribute in my opinion. However it is not supported by IE. So what do we do then ? My personal choice is to use tables instead of figuring out a new pointless unintuitive hack. ( I’m gonna be crucified for saying this… )

    Copy & paste the code below to embed this comment.
  86. Wow, what will they think of next?
    I agree with you Nicholas, so far I have not seen anything to top the performance of an absolute width declaration (via table) and then pinching around with that. I use “includes” to be able to recycle the code pieces (the greatly touted advantage of css). but the point is you can vary backgrounds and images and make a “tasteful” or a “noisy” site. I think the style of the “3ColLiquidWithContent.html” is particularly ugly. But I am mrPictures not mr Text, and probably a “Design Dinosaur” to boot.

    Copy & paste the code below to embed this comment.
  87. Hi Folks;

    Sorry I can’t post a link to the site, as it’s still only served internally … I’ve got a two column layout, using the “+large” padding-bottom & “-large” margin-bottom, and the containing div has overflow:hidden. 

    The problem is when you hit an intra-page link to a named anchor, the content above that anchor gets hidden!  If you refresh the page in IE7 the whole content comes back, but this does not happen in FF.  Using links back to “top” is a solution, but I’m getting some pushback from content developers who think there are too many top links (d’oh!).

    Is there a CSS fix for this out there?  This is for a state government site, so we’re trying to avoid javascript solutions for such things (which is why the multi-column “one true layout” CSS is so much appreciated).

    Copy & paste the code below to embed this comment.
  88. I’ve been using this in many recent designs, as it appeared the perfect solution—spent the entire morning trying to debug a new site, which was fine yesterday—just traced it to Firefox update to 2.0.0.8—breaks all instances of this solution. Anyone any ideas on how to work round this, until Mozilla can sort themselves out?

    Copy & paste the code below to embed this comment.
  89. Shouldn’t this be a bug reported on Bugzilla (Mozilla Bug tracker)?

    Copy & paste the code below to embed this comment.
  90. It looks like there have been at least 3 bugs raised in the Mozilla bug tracker for this issue and it is being actively worked on. The main one is here: https://bugzilla.mozilla.org/show_bug.cgi?id=400406

    One solution would be to inject dynamic content after the container using the :after pseudo-element

    #container:after {content: “.”; height: 0; clear: both; visibility: hidden; display: block;}

    This seems to fix the issue but is not as clean. I have only done some quick tests with this and have not looked at it in Safari but it seems to fix the issue.

    Copy & paste the code below to embed this comment.
  91. I’m doing a redesign for my site right now and I don’t see how this is a big deal.

    I had read this column before but did not have its exact coding in mind when I started filling out the style sheet for the page.  I ended up in more or less the same place.

    http://www.besalighting.com uses tables.  Do you know what that design has?  table-tr-td-td-td-table-tr-td-etc.  There are over 250 lines of code, including java, the page itself is 15k, and employs about 80 (EIGHTY!) images totaling an additional 100ish kb for buttons, mouseover effects, etc.  This code is copied on every page in order to provide a consistent look, and in fact it exposed a problem when the wrong lefthand menu appears on some of the pages.

    The work in progress is www.besalighting.com/newindex.shtml.  It employs less than 40 lines of code.  The style sheet is a whopping 2k.  It currently uses 4 images.  The left hand column is a fixed width, and the main body scales.  The footer is actually not below the main div, but at the bottom of the left hand column (using negative margin-top).  As far as I can tell, it works correctly in IE 6/7 and Firefox at any width 800 or greater, the footer always drops to the bottom, the dividing line always covers the intended area, I can change the text without affecting the layout, I can update the header , navigation bar and left-hand menu by manipulating the SSI pages and have them show up identical on every single page.  And everything so far comes back 100% validated.

    How are tables a better or more elegant solution?

    Copy & paste the code below to embed this comment.
  92. Wouldn’t it be just as easy using positioned graphics on the container div?

    Copy & paste the code below to embed this comment.
  93. Thank you! works great. I’m new to CSS, and already feel the relief.

    Copy & paste the code below to embed this comment.
  94. I’m trying this method with a fluid, two-column layout, and I’m running into some problems.

    The page is here: http://imp.purplelagoon.org/current/index.shtml
    CSS is here: http://imp.purplelagoon.org/css/imp.css
    CSS exceptions for IE6 are here: http://imp.purplelagoon.org/css/iestyle.css

    In Firefox, the contents of the rail (called #menu in my code) are not showing up.

    In IE7, the position of #content fluctuates as the width of the browser window is changed.

    In IE6, the contents of the rail aren’t showing up and the left edge of #content is cut off.

    Any ideas?

    Copy & paste the code below to embed this comment.
  95. Great article!

    Copy & paste the code below to embed this comment.
  96. I have a website that I developed in IE.  It looks fine in Safari and Firefox.  However the fonts, letters are looking a bit smeared.  Are there established stylesheets out there that can assist me.  I mainly am looking for font styles, etc. not layout.

    Copy & paste the code below to embed this comment.
  97. Unfortunately, this solution suffers what much of the web suffers from of late: fixed width websites. Alas. A List Apart suffers from this as well. “For People Who Make Websites”. Yes, but really for “People Who Make Fixed Width Websites”. It’s a regression in functionality. Oh well.

    Copy & paste the code below to embed this comment.
  98. I have approached the equal height columns from a different angle. By nesting the column divs they automatically take on the height of the tallest column. I have created some examples that have no CSS hacks and they work in all the common web browsers:

    Pixel widths:
    “3 column liquid layout – pixel widths”:http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

    Em widths:
    “3 column liquid layout – em widths”:http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm

    Percentage widths:
    “3 column liquid layout – percentage widths”:http://matthewjamestaylor.com/blog/perfect-3-column.htm

    Copy & paste the code below to embed this comment.
  99. Sorry to take part into discussion so late, but I found this layout and discussion recently. Thank you Matthew for very nice and useful solution. Why not to play with negative margin, it’s OK.

    I found a little IE6 bug when adding pictures or texts on the articlerail.

    The pictures escape often to the right over the rail border, when you rezise IE window. The highest picture does no escape, no matter the picture widht.
    Here is example before resizing: http://juhanile.fidisk.fi/3layout_wPictures_1.jpg
    … and here after resizing: http://juhanile.fidisk.fi/3layout_wPictures_2.jpg
    When I switch the pictures, always the first picture stays in the rail but the two last ones escape to the right.

    Of course, all other browsers behave nicely.
    Here is css for the pictures on the article rail:
    #raide img {
    margin-left:2px;
    margin-top:2px;
    display: inline; 
    overflow: hidden;
    }
    Also I have added to the #center this line:
    overflow: hidden;

    Is this article rail useless on IE6?

    Copy & paste the code below to embed this comment.
  100. I worked with it for a while but gave up.  Thank you, thank you, Matthew Taylor for posting the links to your samples. You have just the solution I have been looking for.  Just plain common sense and CSS without any buggy hacks.

    Copy & paste the code below to embed this comment.
  101. In working my way through the code in the “Three-column liquid layouts” section, I can’t figure out what this rule is supposed to do, unless it’s to accommodate a particular browser:

    #container{
      margin-right:-200px;
    }

    The layout doesn’t seem to change (at least visibly) if it’s taken out.

    And the site I’m working on will need borders around the sidebars, can y’all recommend a solid “holy grail” alternative?

    Copy & paste the code below to embed this comment.
  102. The preview looked fine I swear! Here’s another try with code tagging:

    Here’s an alternative way to use negative margins to get a three-column layout. I’ve used the example HTML from this article, but note the CSS methods used for layout are quite different, using padding on an “inner wrapper” div within the center rather than borders.

    Three questions:

    Do you see a problem with using this method as the basis for a fully fleshed out three-column layout?

    Have you seen it used as such before, and if so, can you point to further examples or information on the technique? (side note, if not, I christen it the “Kapok” method since it uses padding <g>

      and

    Can you point to “tried and true” three-column layout techniques robust enough for a CMS-driven site where users are contributing unpredictable content that may disrupt a fragile layout?


    I’ve set the code up in three stages like a howto, so that newbies can easily see the logic behind it.

    Stage 1:

    <br /> &lt;!DOCTYPE html PUBLIC &#8220;-//W3C//DTD XHTML 1.0 Transitional//EN&#8221;<br /> &#8220;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#8221;&gt;<br /> &lt;html&gt;<br /> &lt;head&gt;<br /> &lt;title&gt;3 columns, liquid center&lt;/title&gt;<br /> &lt;style type=&#8220;text/css&#8221;&gt;<br /> body{<br /> margin:0;<br /> padding:0;<br /> }<br /> #container{<br /> background-color:#0ff;<br /> float:left;<br /> width:100%;<br /> display:inline; /* So IE plays nice */<br /> }<br /> #leftRail{<br /> background-color:gray;<br /> float:left;<br /> width:150px;<br /> position:relative;<br /> &nbsp; height:300px;<br /> }<br /> #center{<br /> background-color:yellow;<br /> float:left;<br /> width:100%;<br /> &nbsp; height:300px;<br /> }<br /> #rightRail{<br /> background-color:green;<br /> float:right;<br /> width:200px;<br /> position:relative;<br /> &nbsp; height:300px;<br /> }<br /> &lt;/style&gt;<br /> &lt;/head&gt;<br /> &lt;body&gt;<br /> &lt;div id=&#8220;container&#8221;&gt;<br /> &lt;div id=&#8220;center&#8221;&gt;<br /> &nbsp; &lt;div id=&#8220;articles&#8221;&gt;Center Column Content&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div id=&#8220;leftRail&#8221;&gt;Left<br /> Rail&lt;/div&gt;<br /> &lt;div id=&#8220;rightRail&#8221;&gt;Right Rail&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/body&gt;<br /> &lt;/html&gt;<br />

    Stage 2:

    add:

    <br /> #articles{<br /> &nbsp; padding:0 200px 0 150px;<br /> }<br />


    Stage 3:

    add:

    <br /> &nbsp; margin-right:-100%;<br />

    to the ruleset for the #center div


    Here’s my explanation for how the negative margin works, please let me know if I’m off base:

    By setting a negative margin equal to the width, the float rules act as if this div has no width at all, allowing the following floated boxes to overlap it.


    Thanks for your time and attention, and hope someone finds this helpful, or at least interesting. . .

    Copy & paste the code below to embed this comment.
  103. first, thanks to help me climb out oft the box
    ————————————————————————
    i try to use it in asp.net
    in file MasterPage.master
    it can’t work
    it can’t display like you in design page but
    it cant preview in ie 7.0+ only

    help me pls.

    Copy & paste the code below to embed this comment.
  104. The solution is the multiple column proportional synchronized scrolling layout!
    The SLIRK Layout.

    Copy & paste the code below to embed this comment.
  105. great article indeed!
    I tested it with some odl browsers and yeah – it is not taht good but who cares? Just look at the recent stats of what users use and you’ll find that IE 6 is the oldest while IE 7 and FF are two equal leaders.

    Copy & paste the code below to embed this comment.
  106. Brilliant!  I was trying to figure out how to do a three column, equal height layout just last night, and though I hacked out a decent idea, the one in this article is so much simpler.  Thanks!

    Copy & paste the code below to embed this comment.
  107. Working on a website for our local volunteer fire department, and just can’t seem to get the columns right. Site looks okay in IE7 with the use of a few
    ‘s, etc., but not okay in Firefox and Opera. And Safari is way off. All I know about using this type layout came from your website.

    Website url http://www.jwgmg.com/TSVFD/index1.html
    CSS url http://www.jwgmg.com/TSVFD/styles/style.css

    Copy & paste the code below to embed this comment.
  108. I have found this solution useful in getting my site done the way I want. Now, the only thing left is to figure out how to center the entire layout in the middle of the screen, versus having it align to the left edge of the screen.  Any thoughts?

    Copy & paste the code below to embed this comment.
  109. You can have a look as well at Flexi CSS Layouts – a Dreamweaver Extension that help you create Css layouts in Dreaweaver without coding.

    Copy & paste the code below to embed this comment.
  110. Thanks for the article! I was really floundering in a sea of div’s, floats, and classes. I incorporated your model and got the alignment I needed.

    Copy & paste the code below to embed this comment.