CSS and DIVs- Design question

[spenland]

Hi guys, I've taken the advice of many web professionals and I'm trying to build a new website using only css and DIV tags with no tables! It seems to be going pretty well, except for a few formatting issues.

Here is my problem. If I have three sections that I want to display side by side horizontally. I first tried to encapsulate these three sections into one div, but that didn't seem to work.

Then I seperated these three sections into seperate divs. The first section displays no problem, but the second and third seem to drop down a few pixels. I coded these sections, (lets call them sec2 and sec3 for reference) with a margin-top = -500px so that they would display next to sec1, but in Internet Exploder sec2 and sec3 seem to drop down a few pixels.

I tried creating sec2 and sec3 without coding a margin-top, and they always just drop right below sec1, which is not what I want.

So I guess my question is, am I doing this correctly? I have a feeling that hard coding the location by pixels may be a problem, but since this is my first experiment with this type of design I could use some pointers.

How would you do it?

Thanks!

[Easywebdev]

Float the sections.

#section1, #section2, #section 3 {
float: left;
}


<div>
<div id="section1"> content </div>
<div id="section2"> content </div>
<div id="section3"> content </div>
<br style="clear: left;" />
</div>

[chebyrashka]

I use a table to do that often... I've done floats many times before as well and works and then breaks down later, depending on what you want to do.

There's not a silver bullet to this and although using pure div's for layout is a worthy goal, a better goal is to design a website that does what you need. Don't get too caught up in all the hype.

[William Satterwhite]

I would think absolute positioning for each div would work too.

[rickbkis]

I think you also have to set the margin-left of subsequent DIVS to clear the previously defined DIVS. Maybe only if you set the width.

For my part, I tried designing a page with CSS and DIVS only, but got blown out of the water by IE's not positioning background images precisely in the DIVS (it worked great in FF).

Had to go back to tables, and even then, I still had to do stupid things like declare a 1px border at the top of some of the TD's to get the background image to move up.

Call me "not a happy camper" on that score.

rickb

[minorgod]

You will never get a 3 column layout to work properly using the standards. You will either have to create conditional stylesheets for IE or use quirks mode by specifying a transitional doctype in your HTML, which defeats the purpose of using the CSS standards and still won't solve all your problems. Every year I revisit this issue and every year I nearly burst into flames out of sheer frustration. I say you do what I did and give up on CSS layout for now unless you can use one of the few layouts that are known to actually work across most browsers without using CSS hacks. I have recently decided to continue using tables for all my real work because they work in ALL browsers and you will save your sanity for something that's actually important such as SEO. And in case you're using CSS because you think it will help your rankings, it won't. Ask any SEO expert and they will tell you that the (important) search engines do not care one bit whether your pages conform to standards or not. Please feel free to read my blog post regarding this issue. I would have posted it here, but it's just a bit too unprofessional and profane for this forum:

http://electrongun.blogspot.com/2006...er-makers.html

[BlackCat2]

If I understood you correctly this site should have an answer for you:

http://blog.html.it/layoutgala/

Good luck, hope that helps.

Heidi

[William Satterwhite]

If you float section 1 left and section 3 right while leaving section 2 alone, that should work. I would think absolute positioning for each div would work as well.

[rms7design]

well... I do all my website using css.... easy as 1-2-3... you float every div. insert the width (make sure the total is not more than the width of the wrapper and that's it... I don't see all the fuss about it.... tables are worse... and when it comes time to make changes across the website.. you will be happy you used css...

see ya

[spellham]

I'm on board with the float method as well. I've designed several sites using pure CSS, <div>, and strict XHTML doctypes that seem to render fine across both IE and FF. Most are 2 column layouts, but all floated and 99% liquid layouts.

There IS certain degree of hype around div/css versus tables - do what works for your site, thinking of maintenance, future changes, etc...

Yes, I have had headaches with CSS and tableless design, but I've worked through it and am sticking with it. Easier to maintain with separate stylesheets in my opinion and the pages are not bloated with table code.

SEO benefit is questionable, but I do know that the pages I've built or redesigned in a tableless format are considerably smaller than tabled designs with the same content. Less markup to wade through and parse for SE's in a tableless page. Read into that what you will: faster loading pages, bandwidth saver, less parsing hassles for the search engines???

[voodooboy]

Originally Posted by chebyrashka

I use a table to do that often... I've done floats many times before as well and works and then breaks down later, depending on what you want to do.

There's not a silver bullet to this and although using pure div's for layout is a worthy goal, a better goal is to design a website that does what you need. Don't get too caught up in all the hype.

I love it when people use the word "hype". It just means they don't know how to do something. Doing a site in CSS is a great venture. You get clean code, an optimized site for SEO, and the readiness to move into the next generation of design. Those that believe it is only hype, will end up playing catch-up when table structure tags become degraded.

To answer the question, I suggest the trusted "search the Internet" process. I have done several sites using all CSS and have had great results. Some of the sites I used to get a handle on doing 3 column layout included:
http://glish.com/css/7.asp
http://bluerobot.com/web/layouts/layout3.html
http://webhost.bridgew.edu/etribou/l...col_footer_02/
http://www.webproducer.at/flexible-layout/
and the list goes on, and on, and on...

Begin by finding the site that matches your needs. Copy the code and adjust, play, and fiddle with it until it works the way you want. It is much easier to start with a base than to start from scratch when you are just learning.

Have fun. Post the url when you have it down so we can see.

[vfilipski]

Thanks for this info - the layouts are VERY helpful when I am trying to troubleshoot a design

Originally Posted by BlackCat2

If I understood you correctly this site should have an answer for you:

http://blog.html.it/layoutgala/

Good luck, hope that helps.

Heidi

[DesignComm]

I would look at doctypes and also look for extra code that text editors sometimes generate. If you're hand coding, obviously you can skip this step, but if you're using Dreamweaver or GoLive, it's a real possibility that this is your problem. Also, make sure that the "px" appears with every measurement.

Good Luck!

[noel_x99]

I learned a lot from the tutorials here:

tutorials.alsacreations.com/deroulant/

[MattE]

This is what i did

#sample{height:205px;}
#sample p {
float:left;
text-align:center;
display:inline;
border:1px solid #ccc;
margin:5px 1px 5px 1px;
background:#ffffff;
width:151px;
height:192px;
}

and in the body

<div id="sample">


your content<</p>



your content</p>



your content</p>



your content</p>
</div>

This worked nicely - see www.caricatureking.com/indexMay06.php to see the result

[cbstomper]

If it was me I would go to the Microsoft web site and down load the trial for Microsoft Expression Web Designer and use it to check your style sheet then you can edit it and see the changes that are made to better understand it.

Want the best web hosting go to (Mod edit: Affiliate link removed) the best 24/7 tech support any where and much much more.

[drummin]

You might want to check out some of these...
http://www.cssplay.co.uk/layouts/index.html

A great site full of CSS design tips.
Drummin

[MuNKyonline]

Originally Posted by rms7design

well... I do all my website using css.... easy as 1-2-3... you float every div. insert the width (make sure the total is not more than the width of the wrapper and that's it... I don't see all the fuss about it.... tables are worse... and when it comes time to make changes across the website.. you will be happy you used css...

see ya

I disagree entirely. There is far more to making a CSS website that displays the same in Firefox and Internet Explorer as you can see if you look at the links in your own signature. I use a hybrid of the two, tables I find are best for creating the main layout and then css is great for controlling the content and menu's. There's absolutely nothing wrong with using tables.

[adbart]

why is everyone so against tables these days? :P

[Peter (IMC)]

www.i-brane.com/cssonly/

I don't know if this is all exactly by the standards, but this generally works pretty well for me.

[JimmiJames]

It all comes down to time. Creating a CSS layout compatible in all browsers is time consuming while a table layout is not.

I love what CSS can do but when you have a certain time frame to build a website, a CSS layout is just not an option for me.

[weslinda]

I'm not sure why all the "fuss" about tables being our enemy. They aren't. While nested tables using 732 cells can be our enemies, using a small single table can work wonders for layout, and save quite a bit of time in the design phase.

If you look at worldfire.com you'll see a site that is xhmtl 1.1 valid, css valid, and very clean, while using "tables". I do all padding, sizing, and layout control with css into the table.

It's such a huge topic that we need tableless design, and yet there isn't a good reason why, other than we're "trying to go where no man has gone before".

A quality site is the objective, not an award on the wall that says, "Hooray, you made a tableless site!" I've built my site to the latest standards, it works across all browsers, and shocker, I used a freaking table.

Now, for those of you so "anti-table" then feel good about your "not so browser" friendly design that isn't handled the same because the browsers don't see all CSS the same, and leave the rest of us real world designers alone.

[spellham]

Originally Posted by weslinda

I'm not sure why all the "fuss" about tables being our enemy. They aren't. While nested tables using 732 cells can be our enemies, using a small single table can work wonders for layout, and save quite a bit of time in the design phase.

don't think anyone said that tables were our 'enemy' just that the code may not be as clean or page as small as using CSS and DIV.

If you look at worldfire.com you'll see a site that is xhmtl 1.1 valid, css valid, and very clean, while using "tables". I do all padding, sizing, and layout control with css into the table.

i think your site looks great and clean and its great that it renders completely the same cross browsers, all that's being said is that the same can be accomplished without using tables. (please, please, don't take this wrong, but the worldfire home page doesn't validate 100% - there are 2 errors) Sorry, couldn't resist...

It's such a huge topic that we need tableless design, and yet there isn't a good reason why, other than we're "trying to go where no man has gone before".

I don't care if anyone has gone there before or not - i just find maintenance easier and smaller faster loading pages using CSS and DIV.

A quality site is the objective, not an award on the wall that says, "Hooray, you made a tableless site!" I've built my site to the latest standards, it works across all browsers, and shocker, I used a freaking table.

Yes, I believe that everyone wants to build quality sites. I would think that a 'quality' site is determined by content and how useful it is to the user, regardless of whether or not a table or tableless design is used. I really hadn't thought about it before, but as far as awards go, I'm sure folks are always looking for more silly stuff to hang on their walls...

Now, for those of you so "anti-table" then feel good about your "not so browser" friendly design that isn't handled the same because the browsers don't see all CSS the same, and leave the rest of us real world designers alone.

We are NOT attacking you or table designs, just trying to help a fellow out with the way chosen to build a site.

[spenland]

Wow it looks like this topic still sparks some healthy debate. Thank you all for your comments and suggestions. The float: left; worked perfect thanks for the tip.

I have used tables for years and I was able to cut the code on my homepage by almost 75% by using DIV tags. My main reason for doing this was SEO, but I've found that I much prefer DIVs to tables just for the flexibility of being able to change an entire website layout so quickly.

[magic_majax]

This works in netscape 4 up. The third column is whitespace I currently use for background images with no tile and align top right.

#wideleftcol
{
position: absolute;
top: 5px;
width: 230px;
color: rgb(0,0,0);
background-color: rgb(255,255,255);
border: 7px rgb(0,0,0) double;
z-index: 3;
padding: 10px;
}
#rightcol
{
position: absolute;
top: 5px;
width:480px;
margin-left: 280px;
margin-right: 5px;
z-index: 2;

Z-index and position absolute can work fine.

Use lots of Divs - they're good elements. Tabular layout messes up Braille browsers, which treat the info as what it's intended - representation of data rather than layout, so the serps hate tabular laid out pages a bit.

[zbatia]

I use the absolute positioning inside of a <div> tag for precise position on the page, and I don't use floating. So far, I had no problems. It removes any potential headache...

[maspick]

Originally Posted by spenland

Wow it looks like this topic still sparks some healthy debate. Thank you all for your comments and suggestions. The float: left; worked perfect thanks for the tip.

I have used tables for years and I was able to cut the code on my homepage by almost 75% by using DIV tags. My main reason for doing this was SEO, but I've found that I much prefer DIVs to tables just for the flexibility of being able to change an entire website layout so quickly.

SEO is a very good reason to abandon table-based layouts. Another reason is accessibility. Tables were designed to display data as you'd find in a spreadsheet, not for presenting the whole page. I have grown very proficient with table-based layouts and can do so very lean and mean, but separating markup (the actual content of the page) from presentation (colors, fonts, positioning, etc.) makes for a very SEO-friendly, user accessible (whatever the abilities or lack thereof) page that even presents reasonably to older browsers. Does it sometimes take more work to look the same in IE as it does in FireFix? Sure it does. Can the same look be accomplished quicker with tables and spacer GIFs? Yes, but at a cost behind the scenes. To get a different sense of what can be accomplished by separating markup and presentation, take a journey through [url=http://csszengarden.com/]CSS Zen Garden[url], where a single page of markup is displayed in so many different ways by changing the presentation only. It made a believer out of me.

[Penman]

Tables are still alive and well and will be for some time to come. The use of CSS is a great thing for most applications. It is not the end all do all for webdesign. Their are some things that simply are easier to do and better done with a table than CSS. When you want a page to fill the screen with your content and have multiple sections grow and shrink automatically with screen size and maintain cross browser compatiblity using a table with the cells and even the main table it self setup with width="X%" can't be beat for simplicity. Look at Microsoft's home page, do a search on Google and the view the code, or even look at Apple's home page guess what the table is alive and well in all three places. Speaking ofApple's home page they have tried using the division command with CSS and guess what it still heavily ladened with code almost as bad as if they did it with nothing but tables. CSS is defintly the wave of the future but for years to come you still will see tables mixed in with it.

[spenland]

It's funny that you mentioned the csszengarden site, because that is the site that got me hooked on CSS design. I have always used css, but never to that extent and I have to say, for my particular website it is going to make things alot easier.

[weslinda]

I'll keep this short and simple. Spellham, I think you take things a little too literally, and yet, miss the point of people's posts.

I'm not speaking of literal "enemies" nor am I speaking of anyone attacking me, two points that you seem to feel I've pointed out. (Although your post sounds kind of attacking, but anywho...)

My point here is that true, tableless design, using CSS and DIV's in a truely graphical / visual environment is nigh on impossible. Especially if you are shooting for true cross browser "friendliness".

A more visual, and graphical design can be achieved much easier with the use of one, or two tables to manage that one, two or three column layouts.

CSS is not ready in ernest for true tableless design in all facets of design. CSS and the browser base still have quite a ways to go before it is truely capable of the things that can be done with other code.

I perfectly believe that web sites should be as clean in code and image size and seo friendliness and basic calls to action and many other "should be's" of a site. However, I don't think that it can be done, just quite yet using pure CSS.

There are lots of key points brought up by Penman and others, that show CSS is not the prime time player it can be, and I think a small blend of each will save you the most time, and create a site you can really control.

Now, when I get into the table, I use CSS to define those table properties so that there is as little code relative to the table as possible.

I'll stand up for tables all the time and I'll keep using them until someone can show me a better, cleaner, and most importantly, faster way to create an appealing site visually, that can be controlled no matter the browser, or environment.

[chebyrashka]

Originally Posted by voodooboy

I love it when people use the word "hype". It just means they don't know how to do something. Doing a site in CSS is a great venture. You get clean code, an optimized site for SEO, and the readiness to move into the next generation of design. Those that believe it is only hype, will end up playing catch-up when table structure tags become degraded..

Yeah but at the same time swearing by any technology is just as bad. I do entire CSS based designs and they work but there are areas CSS just doesn't do well... what's the point of being so stubborn and insist on not using tables when better solutions can be found. There is hype in a lot of CSS and if users would take a pragmatic approach to it, they would get the benefits of each side. There are many instances where CSS floats can wreak havoc, mostly with printing and screen readers. OK sure there is work arounds to everything but don't tie yourself to a technology and insist on it.

Saying that, you will be happier doing all you can in CSS, it should cover 95-100% of what you need to do. And floats for column layouts will work great in most cases, but not all.

[spellham]

Wow, my 4th post and I'm already off to a bad start...

Originally Posted by weslinda

I'll keep this short and simple. Spellham, I think you take things a little too literally, and yet, miss the point of people's posts.

I'm not speaking of literal "enemies" nor am I speaking of anyone attacking me, two points that you seem to feel I've pointed out. (Although your post sounds kind of attacking, but anywho...)

I didn't take anything in your post literally except the "leave the rest of us real world designers alone" which implies that those of using using tableless designs are not 'real world designers' or have no regard for cross browser renedering of websites - which is totally untrue. The point of the post was to help a guy out with CSS, not start a dicussion of table vs. tableless design - I didn't miss it, I simply defended tableless design when you stated that it couldn't achieve the same results as using tables.

Originally Posted by weslinda

My point here is that true, tableless design, using CSS and DIV's in a truely graphical / visual environment is nigh on impossible. Especially if you are shooting for true cross browser "friendliness".

I think that I and other designers/developers would respectfully disagree with you here.

Originally Posted by weslinda

A more visual, and graphical design can be achieved much easier with the use of one, or two tables to manage that one, two or three column layouts.

As others have already stated, tables can be and are of use in particular scenarios... but the same effects can be achieved without them - yes, cross browser.

Originally Posted by weslinda

CSS is not ready in ernest for true tableless design in all facets of design. CSS and the browser base still have quite a ways to go before it is truely capable of the things that can be done with other code.

I agree that CSS does have some limitations and browsers definitely have not caught up yet. I and would dare to say that other designers using tableless design have accepted some of those limitations and/or have worked around them with creative code - that can, yes, render a site the same as a table can.

Originally Posted by weslinda

I perfectly believe that web sites should be as clean in code and image size and seo friendliness and basic calls to action and many other "should be's" of a site. However, I don't think that it can be done, just quite yet using pure CSS.

There are lots of key points brought up by Penman and others, that show CSS is not the prime time player it can be, and I think a small blend of each will save you the most time, and create a site you can really control.

Yes there are and will be table designs now and for some time in the future, but I have yet to find something that can be achieved using a table that the same cannot be accomplished using a pure CSS tableless design. Also, I believe that developers have some degree of control over how quickly transitions can be made, as long as tabled designs and WYSIWYG editors that create bloated code are prevalent, they will continue to be common and more widely supported by the browsers.

Originally Posted by weslinda

Now, when I get into the table, I use CSS to define those table properties so that there is as little code relative to the table as possible.

I'll stand up for tables all the time and I'll keep using them until someone can show me a better, cleaner, and most importantly, faster way to create an appealing site visually, that can be controlled no matter the browser, or environment.

Consistent results can already be achieved, it just takes the commitment to using tableless design and CSS to achieve them.

Now, with all of that being said. I feel the need to apologize if I offended you with my post in defense of CSS and tableless design, but stand by the fact that consistent results can be achieved without using tables.

[bj]

zbatia, if you preview on all browsers and at many different screen resolutions you'll find that absolute positioning is FAR from bulletproof. The only way to ensure cross browser compatibility is to use a float layout. There are many good ones available that you can adapt to your use. Check out the css section of my Kickass WebGeek Resources, along with a debugging section that might come in handy for you, zbatia, and for you, spenland.

To all the table heads in this thread. Your sites will not be available to palmpilots, cellphones, screen readers nor devices not yet dreamed about. Your sites are less accessible. Your sites will be less forward compatible. Your sites are more code bloated. Your sites are less search engine friendly. Your sites are harder to update. Your sites are already obsolete if you're using tables in a non-semantic way. This is the reason for the separation of content from style.

And for the table heads who will argue that dev time is key to their continued use of tables-- get with the program, the problems have been solved already, ALMOST ANYTHING that can be done with tables can also be done with CSS, much more that can be done with css CANNOT be done with tables. The knowledge is there if you just choose to use it. Yes, it's a learning curve, but those who use css for layout are SAVING time, as well as bandwidth, not wasting it.

[chebyrashka]

It would be far smarter for a designer to be more worried about designing in loose vs strict mode than to worry if they are using tables or not for layout elements. There are many areas where float's will wreak havoc on your design. I'm fixing up one right now from a hack company that abused them to no end.

You will always have to compromise somewhere along the line and for each design and site, just decide what your goals are and aim for them. You will be much happier that way.

[Graf1771]

I don't really understand how there can be an argument here - all the authorities on design, layout, accessibility and useability suggest a CSS based site.

I haven't used tables for layout for 2 or 3 years and have found the building and designing of my newest sites has become easier and quicker. Accessibility and useablity issues aren't a problem with a semantic markup - easy with CSS.

If you can't already use it there are plenty of tutorials online, it's really not thst difficult!

[weegillis]

First, let me say that I am all behind the CSS model for site creation, with or without tables. Total separation of presentation and content is a no-brainer.

Beyond this, I have to say that whatever works for the person or persons who will be maintaining the site should be the deciding factor.

If it's a site that I will maintain, I can make it to my specifications and tweak it from time to time to my liking. But if one has no hand in maintainence and content generation, and the site is just handed over to whomever is entrusted with its care, I must sadly admit I have very little faith once it's handed over to them, whichever form it takes. So the pessimistic rule applies--make it work and turn your back. They're just going to trash it, anyway.

Altruistically speaking, one cannot bring oneself to let something inferior go out the door so one will work long and hard to address all concerns and produce a Triple-A site. Experience has proven to me that I am the only one who gives a tinker's damn about it being that way. All the care and effort that went into the hours upon bleeding hours will mean nothing once you hand it over. Their first act will be to destroy the validation and create deficiencies in the accessibility report.

If you build it too shallow, they will likely destroy the page the first time they try to "pretty it up" with their own clever notion of what passes for good taste. At least here lots of layers can help to protect against the outright corruption of your hard sought layout, so you're not at a total loss.

I've tried to build sites that others can maintain and get stuck in the same corner every time--they just can't grasp all the underlying considerations that influenced the many decisions that had to be made to get to this point, and won't have the time in their busy schedule to apprise themselves of your wisdom any day soon. Nor will they miss it.

It hasn't stopped me from coding by the book, but it has always been a very deflating experience to see the level of care and attention at the other end. It's just not there.

So if a table works, use it. If CSS works, use it. Whatever works.

The key thing to remember is that CSS layouts take on different forms depending on the browser, this much is clear to us all. But the way to get around this is not to hack your way into a pixel-perfect layout. Rather, create a layout that presents well in all the browsers and ignore the minor differences. Who uses two or more browsers to surf the web?

That said, it should also be sufficiently clear to us all by now that accessibility IS a real concern and we really should be making our sites accessible, to a fault. With or without tables, the goal is the same, and there are ways to meet these goals either way.

So learn the Guidelines (WCAG 1.0). Test your model extensively, and when you have one that works, go from there.

Learning CSS is like learning anything abstract, there is more than meets the eye. It's not a set of rules. A stylesheet is completely supercedable. The user is given complete control over presentation. Well, nearly complete--it depends on whether you avoid the use of inline styles or not. But the principle is very plain: give the user control. Let them decide how they want it to present. CSS gives the user this advantage, but the site needs to be well formed for this process to play out correctly.

Probably only a handful in a million will ever need to take control, but it's nice going to sleep a night knowing they can do all they want to my sites. Knock themselves out. (Not to be confused with maintaining a site--we're talking client-side presentation, not content generation).

The thing I love about CSS is there simply is no bound. You create a set of layers for the main layout and then customize the heck out of every page afterward. CSS lets you do this. Tables only make matters worse because of the added structure. A normal content section is mainly p, ul, blockquote, img and so on. Leaving the table to hold it all in, CSS can present all these elements in innumerable ways. Just tables by themselves to achieve the same end would be a nightmare.

Lastly, I noticed on looking through a lot of the code displayed in this thread that one common thing is overlooked: the width property on the float. MAC IE 5 will choke on floats if the width is not specified. Also, you can avoid a lot of problems if you self contain the clearing div.

Eg.

<div class="outer">
<div class="inner">
<div class="left">Lorem ipsum</div>
<div class="right>Lorem ipsum</div>


Lorem ipsum...</p>


<img alt="picture" title="picture" />Lorem ipsum...</p>
</div>
<div class="clear"></div>
</div>

In the above example, the inner div contains the floats, the outer div contains the clearing div. This is a very stable way to contain floats, and to bring the border (which would be on the outer div) to the bottom of the longest inner div if the fluid center content doesn't reach the bottom. The floats will not escape the outer container to conflict with content below.

If you don't specify a center width, the floats will be allowed to collapse right into one another if the browser window is squeezed, but the text will collapse within, or fall to below the floats when it doesn't fit the gutter between the floats.

The same holds for the img element. If it doesn't fit the gutter, it will be slipped below the floats. The container will expand to fit everything so the border will continue to wrap completely around.

The trick to getting the img to take one corner of the text is to simply float the img within the paragraph in which you wish to have it appear.

Eg.

div.inner img{float:left;width:100px;height:100px;margin:0.3em 0.6em 0.6em 0}

Notice also that the

is essentially floating in the inner div, without the need for another container. If you want a center width, then just wrap the paragraphs in a div and give it a width.

[Narasinha]

Yay!!! A table debate, a table debate! Or is it an argument, or simply a discussion?

I've harped on this issue as much (or more so) as many others. Put simply, tables are for tabular information. If you want to convey information that you would display in a table on a printed page with column headers, etc. then use a table for that information.

As for tables used solely for layout and positioning, personally, I would avoid them. As weegillis said, "Total separation of presentation and content is a no-brainer." Use CSS for the presentation, not a table structure.

One primary concern for using tables to structure your presentation is accessibility. Have you ever viewed the content of a site with the tables turned off? This is how your site would be read by a screen-reader (used by the browsing public with blindness or very poor eyesight). Interestingly enough, this is also how a search engine "views" your site. It doesn't see your pretty layout, only the content. If your content is spread across some table cells that line up just right in a browser, but not in a logical order when viewed without the table structure, what the search engine sees is not what you want it to see.

Learning to set up a page using valid XHTML and CSS is not that difficult. There are a lot of people on this single forum site willing to help with problems. People in this thread have also mentioned that table-less design is something that will happen in the future, and we won't have to worry about it. Guess what... Some of us have been doing it for years already. Separating content from presentation is happening now, not ten years from now. CSS and XHTML are not hype. If you want to wait until your site "breaks" in a browser before you convert, and you want to exclude visually impaired users from your site, then by all means do so. Some of us don't want those sorts of things to happen.