@jesirose - table-less, multi-column CSS layouts

roopurt18 · February 13, 2007

I happened to come across your blog in your signature and saw your table-less, CSS multi-column layout entry. I figured I'd respond here so everyone else can chime in.

Blog Entry - http://jesirose.com/2007/02/11/equal-hight-columns-css/

"Most layouts use columns. Most designers want those columns to look like tables. Most visitors use IE. If we want to use a table-less layout, we run into problems. When you create your two or more columns, you’ll likely float them to make them side-by-side. Now, whichever has more content will be longer. This doesn’t always look great.

People have come up with many approaches to fixing this issue. The way I’ve always done it is the “Faux Columns” approach.

There’s a javascript approach, which would work if you knew for sure all your visitors would have javascript enabled.

There’s a way to do it using just CSS, but it doesn’t work in IE.

I have yet to find a CSS, non-graphical approach that works in all browsers "

I can't tell you how many hours I've pissed away in the past trying to solve the same problem. There's as many solutions found through google as there are browser-specific caveats. After spending about 5 hours dealing with this same exact issue this past Sunday, I came up with a reasonable solution - to use a table.

I can already hear the guns being loaded and cocked, but honestly, I consider my time to be valuable. I just don't see the point in spending several hours making small adjustments within the CSS, adding IE-specific crap, and special wrapper divs to make the content do what you want.

I've recently switched to a design approach in which much of my HTML entities are broken down into small PHP files that I call components. One of the components is the general structure for all of the pages within a site, call it format.php.

<?php
  // format.php
  // Define page layout

  // Expects vars:
  // $Title - Page title
  // $LCol - Left column content
  // $MCol - middle column content
  // $RCol - right column content
?>
<!DOCTYPE ...>
<html>
  <head>
    <link href="style.css" type="text/css" media="all" />
    <title><?=$Title?></title>
  </head>

  <body>

    <div id="Header">The header</div>

    <table id="Main">
      <tr>
        <td id="LCol"><?=$LCol?></td>
        <td id="MCol"><?=$MCol?></td>
        <td id="RCol"><?=$RCol?></td>
      </tr>
    </table>

    <div id="Footer">The footer</div>

  </body>
</html>

I'm all for standards across browsers, table-less layouts, and a whole slew of other would-be best practices. But until the "standard" is better supported, I don't think it's worth the headache.

Just my $.02

Ninjakreborn · February 13, 2007

Yes, but once a substantial amount of layouts are created, they can be re-created for other purposes. If you take 1 day to build a 3 column layout with header/footer. keep a blank copy (no content), and replicate it and modify it for other projects.

Most of the time the fancy workarounds aren't needed, and once you learn a technique you know it for life.

Jessica · February 13, 2007

I POSTED about this on the CSS forum. I find it kind of creepy that you're reposting my blog entries over here instead of on the existing thread, but okay.

I consider my time to be valuable too, but I also consider learning new approaches and new design techniques a valuable exercise.

I am all for tables for tabular data. But a layout is NOT tabular data, and when I want my content to be structured properly in my HTML files, divs are the way to go here. The faux column approach works perfectly for this, and the HTML markup (which is the part that matters for SEO) is cleaner than using a table.

My CSS does not contain any IE-specific code or hacks.

Again, the fact that you posted this here, addressing it to me, just creeps me out...

roopurt18 · February 13, 2007

"Yes, but once a substantial amount of layouts are created, they can be re-created for other purposes."

That statement is no more or less true than any layout, including the one with the small table that I presented.

At present, there always seems to be a "gotcha" with any multi-column CSS layout. This ranges from different browsers [not] supporting certain CSS properties, different browser behavior when certain events occur, the desire to add padding to the columns, wanting same-height columns, and the list goes on.

The last article on CSS multi-column layouts likened them to the Holy Grail, with good reason IMO.

roopurt18 · February 13, 2007

"I POSTED about this on the CSS forum. I find it kind of creepy that you're reposting my blog entries over here instead of on the existing thread, but okay."

"Again, the fact that you posted this here, addressing it to me, just creeps me out..."

Um, wtf?

I tend to read the PHP Help forum during bits of downtime at work. You had posted in a thread I was reading and I saw your signature had a synopsis of "How to ask questions, the smart way" so I decided to check that out. As a web developer myself, of course I'm interested in any website I'm looking at. While checking out your site I saw the table-less layout entry. As I stated in my original post here, I dealt with the same issue this past Sunday so the article was of interest to me. I gave up in frustration on Sunday and I sensed a general feeling of dismay from the last line of your entry.

I think the topic is of interest to us all so I decided to copy it here. I addressed it to you because, um, you wrote the original. I included the expanded part of my subject line so that others who found it interesting might chime in.

I fail to see how that's creepy, although with that sense of paranoia, you may want to consider the field of cryptography. ;^]

Now, if I were a true internet stalker, I'd probably have known that you originally posted this in the CSS forum in the first place, now wouldn't I?

Jessica · February 13, 2007

It just doesn't belong here though, it's about CSS, so it belongs on the CSS forum.

Whatever

obsidian · February 13, 2007

At present, there always seems to be a "gotcha" with any multi-column CSS layout.

I disagree. I think that someone that is knowledgeable in the area can very easily come up with something that is not only workable, but also works very well. I just took about 20 minutes and was able to come up with a very workable layout that works cross-browser (from what I could test right here at work -- FF, IE6, IE7 and Opera).

http://sandbox.guahanweb.com/css/

This is using the faux column approach that jesirose initially mentioned, but I don't understand why that is frowned upon. The XHTML and CSS validates, and it's extremely easy to put together. Not only that, but with the image as a background, you have some pretty good flexibility to what you do with your dividers, etc.

@roopurt - Your initial comment is what got me on board with this:

I consider my time to be valuable. I just don't see the point in spending several hours making small adjustments within the CSS, adding IE-specific crap, and special wrapper divs to make the content do what you want.

...But until the "standard" is better supported, I don't think it's worth the headache.

I also consider my time extremely valuable, but there are plenty of solutions out there that will avoid tables, and they are well supported. There is only one "hack" in my CSS, and it's the clearfix found right here. If you're familiar enough with the technologies, and you're willing to really apply yourself, you don't have the headaches and time wasters you keep referring to... 20 minutes, that's all -- and that includes getting PS open to create my image and all my upload time, too... very insubstantial, IMHO.

On the filpside, I agree that this belongs in the CSS board, so I'm going to move it. Since the entire discussion revolves around CSS methods, let's keep it in relevant boards

roopurt18 · February 13, 2007

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

So we "save," in the sense of saving from danger, our document layout at the expense of our CSS due to browser inconsistencies. There is also the final warning of, "Just watch out for previous external floats triggering the IE Float Model, as mentioned earlier;" so you may still wind up bit in the ass.

I consider myself a fairly intelligent and savvy guy, but you are right. When it comes to floating CSS elements, I'm not in the know. I've done table-less sites in the past and I did get them to work. But every time I set out to find the new, "best" multi-column layout method, something's changed.

Here's the way I see it. Sure, tables are fine for tabular data and not layouts, as jesirose mentioned. But I could very well argue that a 3 column layout is a table. Hell, I could argue that a paragraph is a table with 1 column and 1 row.

I understand that designers, for the sake of simplicity and different mediums (PDAs, cellphones) would like to eliminate all of their tabular layouts. I even agree that it's the right thing to do.

But in order to do so still requires major work to make it consistent in multiple, and not even all, browsers as far as I can tell. In fact, the process is so counter-intuitive and has so many nuances that there are no less than 20 pages of google results for 'css column layout.'

So until the major players get their [MOD] in gear and support the standard, the problem isn't eliminated, it's only moved from one file to another.

Jessica · February 13, 2007

roopurt, I'm not sure where you got that - my blog's CSS isn't mine, it's a wordpress theme.

Edit: and actually I don't even see that in there. Or in my portfolio's CSS. I guess you weren't talking to me?

roopurt18 · February 13, 2007

Sorry. The CSS in my previous post was from the link provided by obsidian about the clearfix method.

Anyways, the only point I intended to ever make with this whole discussion was that we're all in the same boat here. We'd all like the layout to be separate from the data. We're on our way there, but we haven't quite made it yet.

cmgmyr · February 15, 2007

I feel like it is worth my time to put and hour in now and actually learn and know what I did THEN it will save me that hour (or more) later when I need it again.

dbrimlow · February 19, 2007

I disagree. I think that someone that is knowledgeable in the area can very easily come up with something that is not only workable, but also works very well. I just took about 20 minutes and was able to come up with a very workable layout that works cross-browser (from what I could test right here at work -- FF, IE6, IE7 and Opera).

I agree to a large extent. But there are indeed gotchas out there for any level or expertise.

While I have many layouts that are tried and true, every now and then a client wants an element added that can suddenly and inexplicably blow up the layout.

It may take me less time to realize why, than it does a newbie, but it happens.

Creating multi-column layouts is relatively old hat for those of us working daily, but the real trick is to keep them sane when the content of one column suddenly also needs to have multi-"cell" like display.

Granted, I have STILL not even seen IE7, and can't put off looking at my sites in it much longer (only so long one can avoid the inevitable).

P.S. Yeah, ashamed to confess that sometimes, on a real tough dynamic "product features display", I just toss up my hands and slap on a quick table.

joder · February 19, 2007

I am fairly new to creating table-less layouts. It didn't take me long to create my first one for three columns. If I can do it, I know everyone else can too. The only problem I have had is with 800x600 screen resolution. Differing resolutions can play havoc on a non-table layout if your not careful.

obsidian · February 20, 2007

Differing resolutions can play havoc on a non-table layout if your not careful.

...and for this we use min-width fixes

gazever · February 20, 2007

For table-less layouts, try this tool,

http://www.csscreator.com/tools/layout

Helped me get a better understanding of it

Gaz

dbrimlow · February 20, 2007

...and for this we use min-width fixes

LOL! I don't mean to be contrary with Obsidian all the time. (I respect your skill and advice).

But, max-width is not supported by IE. For IE you should use expressions.

A great article on fixed vs. fluid by an extremely talented css expert :

http://www.456bereastreet.com/archive/200504/about_fluid_and_fixed_width_layouts/

obsidian · February 21, 2007

...and for this we use min-width fixes

LOL! I don't mean to be contrary with Obsidian all the time. (I respect your skill and advice).

But, max-width is not supported by IE. For IE you should use expressions.

Hence the wording of my suggestion: we use min-width fixes. For instance, in my calendar app, the monthly view will not allow resizing below 800px wide. This is done with javascript in IE, and in FF, it's simply a declaration of min-width.

Also, IMHO, this aspect of the discussion has absolutely nothing to do with fixed versus fluid. I'm still recommending a fluid width, only controlled. Let it expand as far as it will go, but only let it shrink to a certain point... one other question: can you give an example of the expressions you are referring to?

That's the beauty of web: you can do nearly anything you can imagine if you're patient enough to figure it out.

Jessica · February 21, 2007

There are min-width fixes that don't rely on JS, I'm pretty sure...

obsidian · February 21, 2007

There are min-width fixes that don't rely on JS, I'm pretty sure...

Let me know if you know of a reliable one. I've found plenty of min-height fixes that rely solely on CSS, but I've not found a reliable min-width one that is applicable to individual elements of a page as well as the page as a whole.

Jessica · February 21, 2007

Ah good point, I was thinking of min-height - but I will keep my eye out for a min-width one

dbrimlow · February 21, 2007

I agree that this should not digress to a fixed vs liquid thread (also, my bad for not noticing the "fixes" - should have known better ) so I will just respond to your question about the IE "expression".

Instead of using JS, try using IE expressions.

An expression (as some of you know) is Microsoft’s proprietary CSS extension. Since it is invalid css, put them in an "ie_only.css" files and only call them via an IE conditional comment.

Here is the example Roger used on his site.

Consider this simple 2 col liquid layout. It will auto

 
... 
<head>
...
<link rel="stylesheet" type="text/css" href="/css/main.css" media="screen">
<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="/css/ie_only.css" media="screen">
<![endif]-->
</head> 
<body>
1. <div id="wrap">
2. <div id="main"></div>
3. <div id="sidebar"></div>
4. </div>
5. </body>
...

The standard css in file "main.css":

#wrap {
margin:0 auto;
max-width:70em;
}
#main {
float:left;
width:59%;
margin:0 0 0 4%;
}
#sidebar {
float:right;
width:29%;
margin:0 2% 0 0;
}

To avoid readability problems for people who like to make their browser windows very wide, since lines of text become too long to read comfortably, he used the max-width CSS property to specify how wide the #wrap element can become. He could have used pixels to define a maximum width for the layout, but that would have made line lengths increase as text size is reduced and decrease as text is made larger. He wanted line length to be comfortable for reading and stay roughly the same regardless of text size. By using em instead of px as the unit for max-width, the width will depend on font size and line length will be similar no matter what size the text is.

Now, the "expression" used in a new "ie_only.css". He added the "display:inline" to take care of the evil "IE doubled float-margin bug".

#wrap {
    width:expression(document.body.clientWidth > 900? "900px" : "auto");
  }
   #main {
    display:inline;
  }
    #sidebar {
    display:inline;
  }

"The #wrap rule makes the width of #wrap flexible until the browser window is wider than 900px, at which point the width of #wrap is fixed at 900px. Unfortunately for IE users, this will not make the width elastic, just fluid with a maximum width. Not as neat as in modern browsers, but better than nothing."

I tried it once on a site I was working on and it worked beautifully. It is on my huge "to do" list to learn these stupid expressions and use conditional comments more. I have a feeling in order to save older layouts that used hacks, IE 7 is going to require it.

Dave

obsidian · February 21, 2007

You know what's funny, Dave, is that I've used those before, and all the "IE expressions" really do are inline JS commands. I have had to use the conditional comments for different versions of IE on some of the more complex layouts I've worked on, but I don't like doing that much, either. I think both methods are extremely valid in this case... good call!

Sign In

@jesirose - table-less, multi-column CSS layouts

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information