[xi_hyperon]

I'm finally starting to get into CSS as a layout tool, but still have little practical experience with it (aside from various tutorials). Below is a layout my company will use in an upcoming redesign, but no one has decided whether to implement it using CSS or tables (or a combination). From what I've learned, I think it is possible to use CSS for this layout, but wanted to ask the experts here what your thoughts are. Would it be easier? Would the layout potentially break if someone goes nuts with the text size function on their browser? Any responses or advice would be appreciated.

[Mooga2]

I would recommend doing the layout in tables, and using a combination of CSS for appearance. You will be spending an incredible amount of time debugging across the Windows and Macintosh browsers (IE5, IE6, Safari, etc), each of which have different quirks to them that show up in layout. Surely, you've heard of Box Model hacks to alleviate some of the issues!

I personally believe CSS is the way of the future, but complete-css designs are still a few years away. Even the most standards compliant website by a standards gurus (zeldman.com), doesn't look very nice in IE5 for Win. That browser alone is about 10% of the market.

I would go forward with a complete CSS design -- if, and only if you care only about the Macintosh Safari market. Safari is very compliant, and is very WYSIWYG when it comes to CSS.

Just my two cents. Good luck with everything.
- moo!

[Millennium]

Ouch. That's quite the impressively-complex layout you've got there.

For something like this, I would recommend a hybrid layout. I'm not happy about this -pure CSS layouts are doable now, if you do them right- but your particular layout style does not lend itself well to IE compatibility. However, if it's done carefully, we can still get most of the benefits of CSS.

The header, main, and footer sections of the spage will be very easy to break out into divs of their own. The branding header becomes its own image with display:block set, while the navigation and search/cart boxes are done as lists. The header is a standard H1. The entire footer, if your picture is accurate, could be done in a single div.

It's the main section of the site which will be troublesome, and this may be where a table is called for. In this case I would suggest a single table with two rows and three columns, with colspan=2 set on the very first cell (the one for the branding image). The remaining four cells can just have content put into them as normal. The resulting HTML code would look something like this (html, head, and body elements removed for brevity):

Code:
<div id="head">
<img style="display:block;" src="image_url" alt="Branding'>
<ul id="primary-nav">
  <li>Nav item</li>
  <li>Another nav item</li>
  <li>Yet another nav item</li>
</ul>
<h1>Header</h1>
<ul id="secondary-nav">
  <li>Search Box</li>
  <li>Cart Info</li>
</ul>
</div>
<table id="main" summary=" " rows="2">
  <tr>
    <td colspan="2">Branding Image</td>
    <td>Content container</td> <!-- to the right of the image -->
  </tr>
  <tr>
    <td>Content Container (2 text columns)</td>
    <td>Content Container</td>
    <td>Content Container</td>
  </tr>
</table>
<div id="foot">Footer</div>

The CSS styling is left for you to do, but this should get the basic layout into place. The result is vastly simpler than traditional table-based layouts, but manages to avoid the worst browser incompatibilities by making the one concession in the main section. The best part is, this shouldn't actually hurt your accessibility very much; not all of the tags are semantic, but it should degrade very gracefully.

[registered_user]

I'd do it with CSS, but I'm a purist.

To be perfectly honest, I don't see one thing on that layout that isn't easily doable with CSS.

in terms of getting a browser to break the layout, of course you can get a browser to break it if you try hard enough. That's just as true with table layouts as it is CSS layouts.

[xi_hyperon]

Well thank you for your feedback. Currently, our site must be compatible with IE 5.5 or newer, so I don't know if that would eliminate some of the issues with IE (I believe 5.5 is somewhat more compliant than 5.0, but am not yet knowledgable enough to be certain).

Millennium, I though about the hybrid approach as a good possibility. Thanks for bringing that up. Registered_user, if I were to go with an all CSS approach with this layout, how much hacking would be necessary given the IE 5.5 or newer compatibility requirements?

Again, thanks for the feedback. I plan to do my own research of course, but right now time is the main issue. I basically have to get back with my input by this evening, so thanks for the speed boost in my learning.

<edit> Millennium - You are right, it is somewhat complex. The original design was much simpler, but fell victim to design-by-committee, including our VP.

[registered_user]

No hacks, just css. You're probably thinking of IE 5.5's bad box model which only really comes in to play when you use both padding and width on an element.

IE6 can add a little extra space to floats, but I don't think that should be a deterrent.

If you're looking for compatibility back to NN4, then a table might be your best bet.

http://roo.clubhouse54.com/layout.html

you can take a peek at that, if you'd like. It's certainly not fleshed out to its fullest, but it's in the ball park in Safari and IE6.

[xi_hyperon]

Originally Posted by registered_user

No hacks, just css. You're probably thinking of IE 5.5's bad box model which only really comes in to play when you use both padding and width on an element.

IE6 can add a little extra space to floats, but I don't think that should be a deterrent.

If you're looking for compatibility back to NN4, then a table might be your best bet.

http://roo.clubhouse54.com/layout.html

you can take a peek at that, if you'd like. It's certainly not fleshed out to its fullest, but it's in the ball park in Safari and IE6.

That's brilliant. It goes a long way towards helping my understanding - thanks for that.

[Phil Sherry]

You can create that layout easily with CSS. When it comes to adding hacks to get those lame IE browsers to display the page properly, everything you need to know is at the following two addresses:

http://www.positioniseverything.net/
http://www.tantek.com/

Just create the page to look great in Firefox/Safari, and then add specific hack sheets for 5.0, 5.5 & 6.0, calling them in via Tantek's filter techniques.

Easy.

[ppmax]

Tables are too much trouble--esp if you need to maintain or redesign your site in the future. Go with pure CSS.

Also, take a look at http://dean.edwards.name/IE7/ It makes IE behave like other browsers. It's not without it's quirks but I've deployed it on a few sites I've done and it really does help with cross browser layout control.

[Synotic]

registered_user: I was hoping someone didn't already code up an example page Still, since I enjoy experimenting with different layouts, I took some time and put together what I think is as close to what you're trying to do: example page. I checked it in Firefox and IE6 and made a few changes (mostly changing some of the margins to borders, which are less likely to be collapsed by Firefox/IE6). They seem to load the same; I checked it in ie:mac 5, and it mostly loads correctly, except for some oddness in the header area. I didn't take the time to try and get it to work, but I'm sure that it's fixable. I don't readily have access to IE 5.5 or lower and I can tell you that it won't load correctly in Netscape 4

As for your original question, on "easiness," I would say, depending on how comfortable you are in either CSS/table coding, that tables are easiest for initial creation. Beyond that, CSS layouts are a lot more flexible and easier to maintain if you ever want to make site wide changes or even just update a single page. The hardest part is probably creating the initial HTML+CSS, but with all these examples, you probably have enough to work something together.

P.S. To any site coders: It's not terribly pressing, but for some reason (I think I was probably missing a character or was experiencing a inheritance problem) I wasn't able to just create a "<div class="clear">" block. Whenever I referenced it in my CSS, it just wasn't seeing it; I had to use an inline style. So if any of you are bored and can tell me what I'm missing, I'd appreciate that.

Edit: Post 2000!

[ppmax]

regarding clearing: I use a <br class="clear"> Here's my css:

.clear {
clear:both;
margin:0px;
padding:0px;
line-height:0px;
}

[MacAtak]

P.S. To any site coders: It's not terribly pressing, but for some reason (I think I was probably missing a character or was experiencing a inheritance problem) I wasn't able to just create a "<div class="clear">" block. Whenever I referenced it in my CSS, it just wasn't seeing it; I had to use an inline style. So if any of you are bored and can tell me what I'm missing, I'd appreciate that.

Your .clear class is defined under your #header and your global class for clearing is .clearit. Were you using .clear where you should have been using .clearit?

[registered_user]

Instead of using an element to clear, which is really something of a hack, instead use overflow:auto on the parent element. It causes the parent to wrap around floated elements and eliminates the need to pollute your mark-up with presentational clearing hacks.

[MacAtak]

Originally Posted by registered_user

Instead of using an element to clear, which is really something of a hack, instead use overflow:auto on the parent element. It causes the parent to wrap around floated elements and eliminates the need to pollute your mark-up with presentational clearing hacks.

Good tip, I'll start using that. I'm guessing this works cross browser? I always try to add clear: both to divs that come after floated elements such as a footer div.

[Millennium]

Originally Posted by registered_user

Instead of using an element to clear, which is really something of a hack, instead use overflow:auto on the parent element. It causes the parent to wrap around floated elements and eliminates the need to pollute your mark-up with presentational clearing hacks.

Dude; I wasn't aware that actually worked. The clearing-div solution is more compatible, from the look of things, but you're right; it shouldn't be used unless there is something naturally occurring at the bottom of the div -such as an image caption- which could be used for that purpose anyway (thus preserving semantics).

[registered_user]

What browser is it not compatible with? I have not had an issue with it at all. In fact, the sample layout I posted above uses it to keep the footer below the #side boxes which are floated to the right.

[xi_hyperon]

Well, I continue to tinker with the examples you guys posted. One day soon I hope to create a decent site using CSS on my own. Again, thanks.

The good news is, my company is opting to go the CSS route. I'm happy.

[ppmax]

regarding the overflow:auto--I wasnt aware that worked, so that's a great suggestion that I'll be using. It appears to work for the situation where you have a background:url(); with an image that's larger than the container--I was using overflow:hidden in this situation. Have you seen any examples of overflow:auto not working in this situation?