We all know the problems that arise when we try to build multi-column layouts in which the columns are of equal height. It has been well documented elsewhere, so I won’t go into the details here.
A project I recently worked on required an elastic layout with two columns of equal height, each with a different background color. As usual, there was no way to tell which column would be taller. I immediately thought of Dan Cederholm’s Faux Columns, but I needed an elastic layout. I also looked at the <!-- domain parked MAR2013; not commenting all of them out since that's not part of the mission actually -->One True Layout<!-- -->, but this seemed buggy and required too much extra markup and too many hacks for my taste. I even thought about using JavaScript to make sure the columns were of equal height, but that just felt wrong. Out of desperation, I almost (gasp!) used a table.
But no, there had to be a better way. I just needed to think “outside the box.” And what is outside the box? Borders. If I could float my “sidebar” (or “rail”) div over the border of my “content” div, I could simulate equal-height columns no matter which one was the tallest.
If this sounds familiar, that’s probably because a version of this method was introduced by Douglas Livingstone and extended by Holly
Bergevin and John Gallant at Position Is Everything. While relying on the same core theory, the method presented here uses cleaner, less deeply nested markup, includes elastic and two-column layout variations, and generally benefits from having been developed in the post–One-True-Layout world. Here is how it’s done. (Line wraps marked » —Ed.)
The HTML:#section2
<div id="container"> <div id="content">This is<br />some content</div> <div id="rail">This is the rail</div> </div>
The CSS:#section3
#container{
background-color:#0ff;
overflow:hidden;
width:750px;
}
#content{
background-color:#0ff;
width:600px;
border-right:150px solid #f00; »
/* The width and color of the rail */
margin-right:-150px; /* Hat tip to Ryan Brill */
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
}
I created a right border on the content div of the same width and color as the rail, then floated the rail div over it. The margin-right:-150px on the content div allows the rail div to move into the newly vacated space. If the content div is taller than the rail div, the border grows with it making it appear that the rail is growing. I set the container’s background color to match the content so if the rail div is the tallest, the container grows with it and it appears that the content column is growing. It only takes a small change to the CSS to make the rail left-aligned, whether the content or the rail is taller.
See it in action or check out the elastic version; try changing your font size and watch the layout change with it.
Three columns: three colors#section4
The three-column layout takes a slightly different approach: the borders are applied directly to the container div. (I could have done this with the two-column layouts as well but I didn’t think of it at the time. Line wraps marked » —Ed.)
The HTML:#section5
<div id="container"> <div id="center">CENTER<br />COLUMN CENTER</div> <div id="leftRail">LEFT RAIL</div> <div id="rightRail">RIGHT RAIL</div> </div>
The CSS:#section6
#container{
background-color:#0ff;
float:left;
width:500px;
border-left:150px solid #0f0; »
/* The width and color of the left rail */
border-right:200px solid #f00; »
/* The width and color of the right rail */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:500px;
margin-right:-500px;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
The center column has a right margin of -500px. This allows the left rail div to float all the way over it to the left edge of the center column. Negative margins pull the sidebars into place. There are a few ways to do this, but this one seems to work the best when we get to liquid layouts later on.
I’ve floated the container div to honor the column heights instead of setting overflow:hidden. This is because the sidebar divs are outside of the container div, floating over its borders, so they would be hidden using the overflow setting: IE does not hide them, but Firefox, correctly, does.
The columns don’t need a background color. Since the colors are set on the container div, which grows with the tallest column, the illusion of equal height is taken care of.
Liquid layouts#section7
After figuring out the fixed-width layouts, I decided to attempt liquid layouts using the same technique. The sidebars would still need to be fixed-width since most browsers won’t respect a percentage-width border setting, but we can make the center column liquid.
The CSS:#section8
#container{
background-color:#0ff;
overflow:hidden;
margin:0 100px;
padding-right:150px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-right:150px solid #f00;
margin-right:-150px;
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
margin-right:-150px;
}
The markup is the same as the two-column, fixed-width version, with the exception of some additional content to show what happens when it wraps. The CSS doesn’t really change much either, but there are a few differences: the container two-column, fixed-width version no longer has a width, and I added height:1% so IE will respect overflow:hidden. (I used the star HTML hack for this, but could have used conditional comments to include an IE specific style sheet.)
I also added a margin to create space on the sides; this is optional. The padding-right shrinks the space the content div will take up: since the content div now has a width of 100%, if there was no padding on the container, the sidebar div would be outside of the container and hidden. Finally, the content div’s width switches from fixed width to 100%, and margin-right:-150px is added to the sidebar div.
As with the two-column, fixed-width layout, the left-rail version requires only minor changes to the CSS. I added a simple header and footer for grins, and you can view the source to see how it’s done.
Three-column liquid layouts#section9
A three-column liquid layout with equal-height columns has been called many things: “Holy Grail,” “One True Layout,” “pain in the @$$”… The following technique is relatively painless, uses proper source order, does not require the use of an image, and seems to be bug-free.
The HTML:#section10
<div id="container"> <div id="center">Center Column Content</div> <div id="leftRail">Left <br />Sidebar</div> <div id="rightRail">Right Sidebar</div> </div>
The CSS:#section11
body{
margin:0 100px;
padding:0 200px 0 150px;
}
#container{
background-color:#0ff;
float:left;
width:100%;
border-left:150px solid #0f0;
border-right:200px solid #f00;
margin-left:-150px;
margin-right:-200px;
display:inline; /* So IE plays nice */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:100%;
margin-right:-100%;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
The margin and padding go on the body this time. The margin pushes the layout in from the edges of the screen, and the padding is the width of the sidebars. The remaining area is the width that the container can grow to be: 100% of the browser width minus margin and padding. On the container div, I set borders and negative margins the same width as those borders. This places the borders over the body padding, making everything fall into place. Then we just can position the divs.
The next example illustrates a nested liquid two-column layout and a basic header and footer. View source to see how easy it is to put the content into place and style it. The nested two-column layout uses the border on the container technique. This allowed me to add a 2px left border to the content and a 2px right border to the rail and overlap them, creating the full-height divider between. This divider will grow with whichever column is tallest.
If you wanted to get carried away, you could eliminate the column divs and just position the pieces of content into place. Because the sidebars are really the borders of the container div, they will still work. If you really wanted to go crazy with it, you could eliminate the container entirely and put the borders right on the body, achieving a three-column liquid layout with columns of equal height and no container divs! The only problem is that the background color of the center column cannot be a different color from the rest of the body—and eliminating the containers makes it much more difficult to position and style things…but it can be done.
I should note again that these techniques only work with fixed-width sidebars, as only Opera lets you set a border width using percentages. Also, the rails cannot have an image for a background, but that may change with the border-image property in CSS3.
So there you have it: multiple columns, equal column heights, fixed or liquid center column, clean markup, and CSS. All it took was a little thinking outside the box.
Thanks for the article, it will definitely help to many people. I’ve already used negative margin in order to create a two-column layout with the equal height but didn’t think to use it with the three-column layout 😉
As you said: Think “outside the box”! Thanks again.
Nice in theory, but I’m almost never going to be able to use this in practice, as virtually all my column layouts use background images in one form or another.
Nice solution. But i think it’s not usable in real-life, because of less browser-backwards-compatibility. for example ie 5.5 and less crashes the layout… it workes fine in FF 2.0, IE 7.0, IE 6.0. but thats poorly not enough…
Interesting idea, not sure it would work if you use blocks that have white space between them though. Maybe it’s my cold, and I’m just not looking at it the right way, but hopefully this will get me going in the right direction. A very interesting article none the less!
Hello,
great hack, but I tried to “double it”, i.e. having on the same page TWO blocks each containing the same two-columns layout one above the other:
| A |B|
| C |D|
so that blocks A and B would be of the same height, and C and D too…
but I can’t manage to have it to work… All I get is that the second “row” is badly aligned to the left…
Any help?
Thanks.
sorry about the previous spot, it’s too early in the morning and I had just misplled 😉 one of the selectors… silly me.
Container block of C & D should have {clear:left} 🙂
I find that using
zoom:1;
is better than using
height:1%;
It has the same effect but doesn’t have to be put inside a * html block or conditional comments.
It has the same effect as height:1% in IE with the added bonus that you can use it on elements with overflow: hidden or auto, as it won’t make the element 1% in height.
Opening a keylock with a paperclips is an ingenious and spectacular magician’s act. But would you seriously buy such a lock?
Using negative margins is an *unintended* use of the standard. Boxes don’t have negative margins. How a browser handles them is not a bug but an implementation choice (a respectable one being to simply ignore out of range values).
A standard defines what can be done, but also *what should not be done* (even if it can be done). This is where many css techniques abuse the standard.
I think this is a real issue. As a newbie, I buy solutions such as this one, thinking that I am investing in a solid foundation. Then I try to add a menu or an image or even a simple italic, and have no clue why things suddenly mess up.
As it dawns to me that I am really investing in implementation exploits, I am ready to throw away this whole css mess altogether. Now that would be an unintended consequence?
My apologies if this sounds as a harsh critique on this work. It is a superb solution to a real problem. Only it requires a magician to make it work in daily life.
I didn’t know negative margins were unintended. I use them pretty often (when ie6 messes up most of the time). Does the w3c documentation state its unintended to use negative margins?
About the actual multi-column technique: I really like it and might use it on a project scheduled for next month!
I’d just like to say thanks, I was having some issues with getting this to work correctly in IE – but it was just an error of my own.
This really opened my eyes, this is a lot cleaner than my usual way of two (or three)-column layouts.
Thanks again.
Still the left rail of
http://www.alistapart.com/d/multicolumnlayouts/2ColLiquidLeftRailTallestHeaderFooter.html
isn’t liquid: it isn’t elastic in its width.
http://borumat.de/bilder/screenshot-temporaer/hc-134.png
If a long leged (e.g. a long word in a zoomed specific font-size) doesn’t fit into that bed, his leg will hang out – into another bed.
The width of a column in a classic two-column-table-layout is elastic.
td.rail {
width: 150px;
}
table{
width: 100%;
}
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercita tion ullamco laboris nisi ut
aliquip ex ea commodo consequat.
When a low vision user zooms as high that a long word doesn’t fit into a column with a given width, the column will expand.
I’m still not a friend of legs which hang outside into anothers bed. And all multi-column layouts, improvised with DIV and CSS, I know, show this shortcoming.
Fred Reisac: Negative margins make perfect sense and aren’t “unintended”:http://www.w3.org/TR/REC-CSS2/box.html at all. They consistently do exactly what you’d expect them to do, which is the opposite of what _positive_ margins do; where a positive margin would normally create space, a negative margin will consume it, with the same overlapping rules applied as always. This is the same both vertically and horizontally.
Admittedly, the rules surrounding negative margins and floats are a little strange, but they _are_ consistent cross-browser, and have been since before IE6. (I haven’t tried yet, but I expect that with little difficulty this layout could be made to work on IE5—there’s nothing here that scares it under normal circumstances.)
I suppose I’m missing something, but how does this differ from placing a background image on the container div?
I’m not understanding the benefit?
Fredrik, you can achieve whitespace within your columns by simply imbedding a div in each column. In this example I am going to call each of these embedded div’s
#center .content, #leftRail .content, #rightRail .content {
padding: 10px 0 0 10px;
}
I like my way better, it’s easier to get pixel perfect widths and it is also more abstract, so it’s easier to change the order of columns without affecting readability of the source code.
http://layout.constantology.com
and yes it’s based of YUI Grids, though users find it easier to read/ understand and over-write.
This complete aversion to tables is going too far, if you did this using a table it would be very simple with perfect behaviour, no need to jump through hoops.
with tables you can:
get a footer that always stays on the bottom, center content on both axis and get columns that grow and shrink together.
just don’t let the CSS police catch you doing it.
Tables are back baby.
I wonder how many hours have been charged to clients by designers chasing after obscure non-table solutions to problems like this…when a simple, non-nested table _gets the job done_.
Mike Hairston and Andre Kemmer, you’re both obviously morons.
Ever heard of the http://www.w3.org/WAI/?
Now shut up and stand aside for people that can do their job.
Maybe I haven’t spent enough time looking at it, but I don’t see an obvious solution for an elastic layout where the first block is not centered. I typically use a design in which the a left aligned navigation is the first block within my wrapper element, and the other element is the content div.
Yes, I’m aware that placing the content first may have result in better SEO, that my clients will probably never notice the difference if I switched it, and that I can just have hidden “skip to [x]” links for those that need it with CSS turned off, but I still disagree with putting content before navigation. To me it does not make sense semantically for a document to have navigation show up after the content. Maybe others here will disagree with me on this, but that is my believe.
That said, I do find this a wonderful technique that I *really* wish I could convince myself to use. If I’m ever in a situation that I feel allows it, I will try it out.
Uh-oh. It’s the fuzz.
How about one with a header and footer ;).
Cssplay example
To be entirely accurate, the web accessibility content guidelines do not preclude using tables.
At priority 2, it says “5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version).” and “5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting.”
Not that I’d recommend using a table to lay out the page, but it’s good to be accurate.
Thanks, Bruce.
Settle down, people.
I use this technique for a long time, thanks to:
http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/index.html
If you can avoid using tables for layout, fine. but if the alternative is a 10k stylesheet full of hacks, then just use a frickin table, i’m pretty sure God(w3c) isn’t gonna come down from heaven and stike you dead if you do.
Thanks for the tip! It provides an elegant and flexible solution for many common layouts.
Two or three columnd based layouts are so common that a single element containing the various columns (essentially the gutters on either side of the road) is the right approach. Using negative margins sounds a bit weird but, if I think back to my school exercise books, this is exactly what margins are for.
As for the age-old table vs. non-table layout: go with what works for you and what your comfortable with. Personally I don’t think tables (row-based) should be used for laying out a page but there may be situations where they provide the best solution. I don’t think anyone would say CSS is perfect yet and the browsers certainly aren’t.
The only progress I’ve seen so far since 2001 is that box of tricks to get CSS to create obvious layouts has become more “sophisticated” and that 7 different solutions to the same problems are offered.
It is time the CSS spec AND the browsers do move on. I’ve a hard time defending this kind of trickey against the why-use-css-when-a-table-works-perfectly crowd and to be honest I’m pretty tired of defending (for all the right reasons like accessibility and the ability to rework the layout without touching mark-up).
Now, if ALA could produce another flaming pamphlet like the ‘to hell with bad browsers’ article, but this time directed against the W3C, browser makers and short sighted managers at the same time, maybe we get to use CSS3-like simple grid commands that will work everywhere the same way.
It’s rediculous that so much effort and money is spent on working around something that should have been solved in 2002 and would so much benefit everyone: webdesigners, web design tool makers, web browser makers and users.
What is so wrong with using a table to layout 3 columns? Someone please answer this. It aint worth it till CSS gets its act together and browsers agree on it 5-10 years from now.
Advantages of using table…no hacks, scales, no crazy css tricks for each and every browser, way less time and energy spent developing it, it just plain works…you css people are like jesus freaks and obviously never designed web pages for large scale websites and paying clients. In theory it sounds pretty, but it just is not practical to use pure CSS for a whole public facing website.
This is a perfect example of when IT IS OK TO USE TABLES. Would you seriously trust this mess of hacks and negative margins over a simple HTML table? There’s no disadvantage, and you KNOW it’s going to work.
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.
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…
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.
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.
“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?
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.
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.
??*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.
… 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.
stuff like this makes me even more impatient while waiting for multiple, resize-able background images.
stuff like this makes me even more impatient while waiting for multiple, resize-able background images.
and border images
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.
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
Regarding the elastic layout…
When you reduce browser width, the columns overlap each other, rendering the content illegible. How is this a valid solution?
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? 🙂
@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.
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.
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.
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.
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!
Interesting, but still not 10% as good as table would do.
Would appreciate if anyone could find any problems with what I have tried on my site: http://www.4w.co.uk/
…exactly the same technique…
http://www.cssplay.co.uk/layouts/3cols2.html
circa 2004
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.
I have just encountered a design, perfect for this. Implemented it today, works exactly as required by client.
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.
Insert subversive article here:
“Coming Back to the Table”:http://banksand.googlepages.com/comingbacktothetable
In this case I’d use table without thinking even 1 sec.
HTML code would be more clear and “direct”.
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.
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.
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.
—–
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.
How would you modify the 2 column layout with headers and footers, in order to automatically vertically strectch to screen height?
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.
Thank you for the great job you’ve made!
Russian translation of your article can be found here:
http://web-log.ru/?p=96
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
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.
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.
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
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.
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?
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 🙂
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.
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!
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.
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…
*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?
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…
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!
Tell me why you cant just use tables instead? seems like a lot of work just to get divs+css to mimick tables.
Just read some of the comments, disregard my previous comment about using tables.
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.
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).
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
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
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).
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.
“Tonico 1-2-3 col layout”:http://webproducer.at/flexible-layout/
By the way, I really like the instant Comment Preview here.
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.
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.
(Hope it hasn’t already been suggested .. got sick of wading through the tables v CSS stuff…)
ah… the width expression makes a min-width in IE…
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!!
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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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
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
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…
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.
Nice tutorial, but working with all of ie and firefox version?
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?
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.
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
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?
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.
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.
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.
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.
honestly, this is exactly the solution I’ve been waiting (looking?) for, for ages! Thanks listapart!
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.
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.)
“This is what happens in ASP.NET 1.1 get”:http://www.acadrad.org/images/stuff/ala_liquid3b_aspx.jpg
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
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.
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;.
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… )
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.
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).
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?
Shouldn’t this be a bug reported on Bugzilla (Mozilla Bug tracker)?
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 http://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?
Wouldn’t it be just as easy using positioned graphics on the container div?
Thank you! works great. I’m new to CSS, and already feel the relief.
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?
Great article!
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.
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.
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
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?
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.
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?
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
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:
Rail
Stage 2:
add:
#articles{
padding:0 200px 0 150px;
}
Stage 3:
add:
margin-right:-100%;
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. . .
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.
The solution is the multiple column proportional synchronized scrolling layout!
The SLIRK Layout.
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.
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!
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
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?
You can have a look as well at Flexi CSS Layouts – a Dreamweaver Extension that help you create Css layouts in Dreaweaver without coding.
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.