11 Opened my eyes

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.

posted at 03:19 pm on February 6, 2007 by Joe Bloom

12 Long legs still hang out

Still the left rail of
http://www.alistapart.com/d/multicolumnlayouts/2ColLiquidLeftRailTallestHeaderFooter.html
isn’t liquid: it isn’t elastic in its width.

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%;
}

<table> <tr> <td class=“rail”>Longwordlongword</td> <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 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.</td> </tr>
</table>

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.

posted at 03:55 pm on February 6, 2007 by Andreas Borutta

13 Not unintended

Fred Reisac: Negative margins make perfect sense and aren’t unintended 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.)

posted at 04:40 pm on February 6, 2007 by Mike Purvis

14 Background Image.

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?

posted at 04:52 pm on February 6, 2007 by Dan Nawara

15 RE: Pretty Close Though

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 <div class=“content”> and then in the style sheet give these some margins or padding:

#center .content, #leftRail .content, #rightRail .content { padding: 10px 0 0 10px;
}

posted at 04:56 pm on February 6, 2007 by Kevin Rapley

16 Untitled

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.

posted at 05:00 pm on February 6, 2007 by christos constandinou

17 Tables

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.

posted at 05:05 pm on February 6, 2007 by Andre Kemner

18 Untitled

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.

posted at 05:13 pm on February 6, 2007 by Mike Hairston

19 Untitled

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.

posted at 05:21 pm on February 6, 2007 by christos constandinou

20 non-centered first block

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.

posted at 05:26 pm on February 6, 2007 by Brian LePore