Boy, if this isn't my rant too! I've always used tables, but I'm working for a guy who looks at using tables for layout like using Hitler's teaching for nursery rhymes.

I did, however, find the following article particularly helpful in figuring out how to do a three-column fluid layout. I think the basic principle is to float a fixed left and right DIV and set the center div with margins the size of both floats. Then the center div will move around because it's not a set size, but it will never extend past it's margins (a.k.a. over the left and right fixed columns).... pretty helpful if you ask me.

http://css.maxdesign.com.au/floatutorial/tutorial0916.htm

Was that some sort of april fools joke/comment? ;)

what you want to do can EASILY be done with CSS, and more efficient. You just need to learn how to use the tools better.

No, it was real. And what tools? I haven't used a thing for CSS - I've been doing it all through notepad (and Whidbey Beta 1 for CSS references).

> a fixed-sized, two column layout: a fixed right column width and an "expand to fit" left column.

Put both columns inside a div set to width: 100%.
For the right column, just specify float: right and specify a width in pixels. Your left-side column will expand to fit whatever's left. Add your header div above those two and your footer below and you're set.

And if you ever need some inspiration or just a demonstration of the power of CSS, just check out csszengarden.com using a standards-compliant browser. All the examples on the site use nothing more than a sample XHTML document and CSS1.

I have spent months trying to get my web site to lay out well in CSS. I give up. I am going back to tables. All I want is the stuff on the left to match on the right. (I won't abandon CSS completely but the table layout wins - CSS for colors, fonts, sizes.)

For example, I have a form where the labels are on the right and the fields are on the left. I CANNOT specify the height because sometimes the label on the left is bigger (wrapped text) and sometimes the fields on the right are bigger (displaying an error under the form field or have a password/confirm password field pair). I cannot get the dang text to line up with the fields. And if you have two fields side by side, good luck making the left field left align and the right field right align.

Then there is when you want the left column match in height to the right column. And do it without specifying the hieght - let it dynamically size height to fit the content. For example when you want to bottom align an image on one column so you can frame the content with graphics.

Yes, yes, there are gurus of you out there who say it can be done. My questions: why do you need a guru to make it work? And why do I need to waste my time becoming a guru to do it myself when there is a simple and elegant answer: tables? I have too much to do already, I don't have time to mess with CSS when it just makes everything more difficult.

CSS for positioning does suck. Why all of the b.s.? I don't even feel like writing a comprehensive rant here b/c I'm too tired from struggling with CSS!

CSS is damn ugly code,it's no wonder you need a guru or editor to generate it.tables aren't 'elegant' i'd say,they're just straightforward compared to something that looks like compiler vomit.

Oh my god, I've been trying to create a site in CSS for 4 days now and my head is going to explode! I'm going back to tables for layout. I was going to leave the text in CSS, but now I see it's impossible to control the space between lines where styles change reliably between browsers. I feel like the professional programmers trying to make web design too complicated for non-experts with all this CSS crap. It's too complicated! I know all the programmers will throw ridicule upon that idea, but the web is supposed to be a popular medium, not just for corporations that can hire programmers!!!

Was there a problem with tables? Why was CSS even invented?? People say that "now you can change the color of your site really easily"! It wasn't hard before! Go to your bgcolor and change the color. Damn. Tables it is, down with DIV!

Maybe you should actually learn to use the tool before you complain about it, because if you're having this much trouble you clearly don't have any idea what you're doing. This is like a VB programmer looking at C++ code and saying "oh my GAWD, this is different and I can't figure it out, so it must be STUPID AND IT SUCKS!"

There are a million and two reasons why CSS beats out those idiotic table based layouts every time. Just because you take an active position of ignorance doesn't mean that the technology is bad. The rest of the world has already realized that tables suck for layout.

Nice. Lets try this one at a time:

CSS isn't a tool. It's a markup language. Speaking of markup, can ya read? I'm not the only one to have this trouble and I've worked extensively with CSS. In fact, I've been using it for style tweaks for the last 5 years. I've also used it for margin control and placement of certain things. Thanks for offering the benefit of the doubt.

Whatever your million and two reasons are, it doesn't change the fact that CSS still sucks for multi column layout with a fixed right column. If you're so sure that CSS is better at this style of layout, feel free to create a style sheet for me that works on ALL browsers and I'll take a look at it. Or better yet, point me to a tool that lets me design this layout via CSS... there's a bunch that do this for tables, even if I do choose to use Notepad as my editing tool.

I just won't hold my breathe while you work on it...

I am a demigod - I know virtually everything about everything. The only thing i dont know everything about is CSS. So i've spent 4 months trying it out. Conclusion: it sucks big time.

I know every programming language in (your) known universe and beyond. 99% of readers (the users) need fast, efficient coding - the same for static websites.
CSS has changed my websites from logical, easily readable code into 3rd-world-ugly non-adjustable dog-vomit: only to be understood & modified by guru's like me - so only i can adjust the sites...

If you love CSS so much, try this...
header
fixed left column
fluid central column
fixed right column
footer
AND the footer is always at the botton of the window UNLESS any column is longer than the window, in which case the footer moves down.

Using tables - 30minutes & code is readable/looks good.
Using CSS - 3 weeks, still doesnt work for everybody & code is $%^"£$*& hideously complicated.

So where is the proof that its worth any effort whatsoever ???????

For complex positioning css is just HORRIBLE. For those that claim it isn't, I can prove to you cases where you are flat out wrong. I can come up with simple layouts in html with tables that you end up having to do all kinds of unintuitive things to get the same results with css. Couple the problems then later on when you decide you want to add maybe a collapsable div or table inside one of your other divs. The whole thing can totally blow up on you.

Just look how lame css positioning is for doing something that should be simple like positioning a div vertically in the center inside of another div. Why the heck can't it support a vertical-align:center??? No, you have to do crazy stuff with margin percentages and auto. Then there are cases where you want a fixed width div but you want others to expand as the browser resizes... it's flat out stupid what you have to do - give one div a huge negative margin and float others in the correct place. Things can, yes, eventually get done with css positioning but it's often so obscure that when something breaks in one browser it's difficult to track down the problem.

To also prove my point, look at the source code of the different samples provided at this site: http://tutorials.alsacreations.com/modeles/ They nicely show how to do a lot of things, but look how obscure the solutions are - negative margins, different kinds of floats, some things absolute positioned, some relative. It's a nightmare. You CSS gurus are fooling yourselves if you think this positioning stuff is "good."

I'm a css fan, but not when it comes to comlex layouts for websites.

Also, if you are coding in something like JSP, you only need to code one layout in your tables if using something like Tiles or Sitemesh - so the maintenance factor isn't a problem since you're only maintaining one layout page.

Out of frustration I just typed in: css positioning sucks into google and got you guys!! thanks for the reality check. I've been struggling with this all day and my main frustration is trying to get the layout to work in BOTH IE and Firefox. Not successful yet (even with IE work arounds which already tells you there's a problem). No doubt there's a way but why the heck is it so amazingly unintuitive!

Is there really anything wrong with using both tables and css together wherever it suits you best? I can understand Beth's frustration when it comes to css and trying to get something that conforms to multiple browsers... I personally like IE and Firefox the same for browsing and just deal with the fact that I can do some things with one and other things with the other (I'm thankful to everyone who has contributed javascripts that can help with a lot of the cross browser issues out there)... I also agree with Randy that you can't slam css because it hasn't worked for you. I find that the only time things get messy with either css or tables is when people get lazy and don't comment or indent appropriately (I'm as guilty as anyone)... well, that and when people try to "style" every element instead of creating a class or an id.

You only need to take a look at the agonies the CSS gurus go through to realise that unless you're specialising in CSS you ain't gonna get it right. I gave up on CSS positioning long ago when I realised the days, weeks and months were slipping by when I could be concentrating on Perl,PHP,MySQL,PostgreSQL to get some real work done.

I never found one client who gave me any credit, or extra dosh, for a fully IE5-hacked standards compliant CSS layout. CSS is for people who don't need to earn a living.

Geez, what a bunch of inept amateurs. Leave web design and real websites for the pros. All of you, slowly back away from your computer, and take up something simple, like knitting. That's not too hard. Otherwise, educate yourself's, do some actual work, and stop substituting intelligence with laziness. me.gothrowup();

do {
BlowMe.ShowModal();
} while(punksnick.Personality == idiot);

I'm a 12-year web development veteran and I think this whole CSS thing is just another flash-in-the-pan.

The CSS advocates are correct when they say that you can do wonderful things with stylesheets if you know what you are doing. The trouble is that to get everything standards-compliant you have to make coding revisions and study your life's work keeping up with it all.

No commercial artist wants to spend all their time looking at tags. At some point you have to give the aesthetics of the GUI your focus using what works for the project, instead of only accepting what will fit into a stylesheet scheme. After all, when it comes to visual design, the most noteable contribution CSS-based design has added to the web design landscape to date is... that monument to bland, utilitarian cookie-cutter design: The 3-column blog.

I think that CSS freaks should do this: Stop preaching the nerd gospel of the obsessive coder to other commercial artists and developers. Get together in a think tank and put all that coding, research and effort to work in some kind of killer web development app. Sell the app to all of us who don't have the time or aptitude for coding all that mess and we will make you very rich.

Come on CSS folks, wouldn't you rather be rich than right?

CSS would be a hell of a lot better if it was supported by browsers like it should be. Unfortunately, as most people are still using Internet Explorer (which is limited in its CSS display properties), creating a layout that keeps your standards across mulitple platforms and browsers is not so much impossible as it is a giant pain in the ass. I've been using CSS to modify the look of blogs for ages (since 4 years ago, when I had a Xanga and decided I wanted to make it look less ridiculous). It'll either work well, or be completely horrific. It seems like the biggest problems occur when you try to put things in a certain spot. It's next to impossible. Half the positioning tricks that should work usually don't, or if they do, they're off anyway.

Even the relatively simple stuff can be off in some browsers, especially IE. Firefox isn't perfect either, but it's better.

Who knows anymore. I gave up trying to figure everything out in CSS. Here's what I've got right now, using CSS to alter a basic Myspace page to make it even more basic. www.myspace.com/munificence

I've managed to learn three programming languages while trying to get CSS to do a relatively simple layout.

Its been two weeks and although i've learned a lot more about CSS, it just sucks at the positioning you guys have argued about badly.

I know its going to be a powerful tool and knowledge to have once I master CSS. But god damn... this is frustrating.

Thank god for this piece of sanity on the web. I'm sick of being told how stupid I am for still using tables, because CSS is the future and tables are for lamers. If CSS was to work the way the gurus claimn I could use CSS to style any document the way I want, but you can't because for some things you need to nest DIVs in a specific way to get the job done.

I've tried to ditch tables and gone back to them time and time again. Maybe in 6-10 years things may be different.

CSS is pretty much the ugliest thing in computing since gotos (even gotos was nicer). The geniouses at w3c decided to spec things to be really unintuitive. But it doesn't end there, since browser makers screw things up by not agreeing to a single correct implementation of the said spec. So instead of getting things done, we act like some 18th century printing machine operator messing with layouts.. layouts for fvcks sake.

We're living in the stone age of computing.

Amen brothers and sisters. I don't have a problem with the CSS markup semantics, it's just that to create a seemingly simple layout with CSS requires employing so many bizarre and unintuitive tricks reaped from tedious hours of googling. Hell, the fact that websites even EXIST to explain how to make simple column layouts is enough to see how ill-equipped CSS is. While these websites extoll the virtues of negative margins/pads, hidden overflows, and superfluous nested DIVS to create the most basic layouts, it's time to wonder--WTF? Expressing a friggin columnar layout should require a SIMPLE style definition!!! It's pathetic what we've got to do now!!!!!!!11one

Thanks for the rant space.

Its total madness. I don't even want a 3 column design. Just a few divs and images positioned. Looks great in firefox and IE (finally), but wtf, try it in Opera and things are overlapped. Sure, both people in the world who use Opera will be offended, but still... I shudder to think what it looks like on Mac. At this point, don't care, they can deal with it.

And negative positions??? I "get" it, I know geomety, but come on, its so unintuitive what things are relative to, the only way to know when to use negative is trial and error with endless refreshs.

It all feels like 1994.

And yes, it really IS the browsers fault they don't all interpret css the same, but there has got to be a reason and the reason is because css is inherently flawed

Thankfullness for this website! I was doing searches on the web for CSS sucks and found this page. I am sick and tired of the CSS gods preaching how CSS is trying to go web standard. Get rid of that sh!t, it's redundant and extremely time consuming. It's so lame that just for fun I tried to layout a simple looking page in CSS and it took me ALL DAY vs. what would of taken me 30 minutes to do in tables. Where's the ease in that? And CSS more accessible, easier to maintain...bullsh!t! I see arguments the CSS geeks mention that tables were not meant for page layout, and CSS is? Tables pretty much started the web and now you're getting the yuppies coming in next door and trying to rezone their property lines. I'm totally cool on using style sheets for text within a table environment or using style sheets for php applications but whoever invented the use of CSS to layout a complete web page or entire website needs to be kicked in the head. I get a laugh out of the defenders who say, "CSS is easy, you just have to learn it." Give me a break, tables have worked just fine for users over many years. It's not apparent there's all these horrible issues users had with tables. Perhaps a couple here and there such as printing a page but look at pros and cons people. I can put a lot more cons againts CSS as well as many others on this site. Who are we trying to please by learning CSS as a full layout for site design? As somebody said, the client or the CSS gods? I could care less what others think when they do a "view source" and realize it was tables that layed out a page. The tables still do the job! In result, CSS or tables? The site still looks the same. Yeah you guessed it right, I'm lazy and don't want to learn CSS. Kidding, CSS sucks.

CSS is simply broken. What's so sorry is that it was designed broken. I just want a java.awt.BorderLayout in CSS with divs, how hard is that. Don't want tricks and hacks to make it somewhat work on some browsers some of the time. It's very difficult; ugly. I get tired of banging my head against the wall for such an idioticly simple layout. Ahh, tables (with minimal CSS), done in a few minutes. Stupid CSS.

I'am a css,xml,html,xhtml,java,.net,php,c# guru

When i am officialy working, i only use 1 table for making a 2 or 3 column layout. The rest is div. The only reason why i use this table, is because it is damn fast, works in any browser instantly, takes no hacking and time consuming coding in the stylesheet or java.

In my spare time however i spend weeks even months to make a feature-rich 3 column div layout that work in all browsers, it takes all kind of hacks to make some things "seem" to work. but switching browsers takes me out of this illusion again.

If i would do a tableless layout in my worktime i would have been bankrupt. The whole "must use div" for layout is ridicalous really and currently not useable to any professional because it just takes to much damn time to work out all the nags for compatibility.

If you spend a day to make a 3 column div layout what you could do in 2 minutes with just one table. then you must be crazy or unemployed.

You are all idiots. Learn css and you can implement web standards. - Hyde.

I do apologise. css is an experiment gone wrong. My friends and i are working hard to stop people using it. The original ideas of giving more design power were good - but replacing tables was never the dream. - Jekyll.

What are you people doing? i see so many of you going on about how great css is. i should have stopped it, but i was busy. It is listed on my Wall Of Shame, next to Comets, Dinosaurs, DRM, Fossil fuels, Scientology...

But it is refreshing to see the growing voice of Anti-css. Spread the word: css was a mistake.

I'm a very experienced (15+ years) (web)programmer and designer (for who cares).
I agree with most of the rants here about css.

This is my opionion and vision:

CSS suits document-like designs best where the browser is used as a simple document viewer. Unfornately, browsers are not only used as simple document viewers, but very often as pseudo application windows where the viewport acts as the 'client area'. It's this hybrid use that the CSS designers seemed to have ignore completely.

For those who program in Java, something similar to the layout managers used there for laying out components (analogous to div's) on the canvas is what web designers really need. That way components can be *easily* made to stretch to fit, have magnetic edges, etc. etc. Only then can web designers can stick to what they do best instead of spending weeks googling for and reading about css hacks.

I suspect the CSS used today, will be a completely outdated technology in a couple of years. Either the open-source community must come up with a new and practical alternative, or Microsoft probably will (with all the negative consequences of that).

I wrote a rant about CSS in my blog (check my website address), if somebody's interested; I agree that CSS is overcomplicated.

I.D.I.O.T.S.

CSSWHORE is the perfect example of why I hate CSS, asshole zealots who worship it and declare jihad against CSS infidels. Get a life.

To preface this, I've been tearing about computers and putting them back together since I had the dexterity to handle a screwdriver. I've got 4 computers and a laptop in my house that are powered on at any given time. I'm a pretty freakin' big geek.

But I can't help but feel that CSS-P is the programming geek's revenge on graphics designers the world over. That this whole "semantic markup" thing is some sort of horrible joke being played on visually intuitive people by folks who eat sleep and breathe mangled code.

"Separate your layout from your content and you will achieve inner peace!"

When exactly can I do that when I have to spend 10 times longer trying to lay the site out with these asinine CSS positioning paradigms than I did DESIGNING it in photoshop?

"You shouldn't design the page in photoshop, you should markup the content and then come up with the layout. Content, then markup, then layout."

Fuck you and your shitty code too. I design the layout first, because the layout dictates the design elements, like where the titles go, and how big they can be, and this and that.

For about 5 minutes, I was starting to buy into the bullshit on that csscreator.com website, but thank god I thought to google "css sucks" and got the opposing perspective.

<table>s forever!

The true fact is that CSS purists like to advocate the use of CSS simply because it gives them a part of the web back. The fact is and will remain that tables are amazing when it comes to designing cross browser compatible web pages.

The biggest and most RIDICULOUS chant of CSS purists is that "Tables weren't meant for layout!" How dumb. How many things in life were never meant for what they are used!

So why do these CSS geeks brag about CSS. Because it allows them to earn more money. They can sit, use javascript (which is a horrible tool considering that you are at the mercy of the web surfer) to make their CSS website cross browser compatible and charge the poor client $700 for web design! What a rip off.

You could create a table version quicker and for cheaper. For those who claim "future compatibility," just remember one thing, TABLES ARE HERE TO STAY. You can write valid markup code using tables. Tables are a part of CSS. It may not "be correct" but you can use tables to ensure future compatibility.

Ever look at the web giants. Most use tables. Why. Simple. Easy. Cross Browser Compatible. What more could you want.

CSS-P is a new FAD and has given scrupulous individuals an opportunity to rip of clients and hence they have tried their best to promote this menace. Stay away from CSS-P. Your website will break. Use Tables. Tables rule and will always rule.

Sure are a lot of unfounded negative comments about CSS here :-(

Anyway... the solution. Here's the markup:

[div id='header']
header goes here
[/div]
[div id='content_wrapper']
[div id='content']
content goes here
[/div]
[/div]
[div id='navigation']
navigation goes here
[/div]
[div id='footer']
footer goes here
[/div]

and the css:

#header {
clear: both;
}
#content_wrapper {
float: left;
width: 100%;
margin-left: -240px;
}
#content {
margin-right: 240px;
}
#navigation {
float: right;
width: 240px;
}
#footer {
clear: both;
}

basically, what you are doing, is shifting the content_wrapper left by the width of your navigation block (240px in my example), then shifting it back in the content block.

Don't give up on the CSS ;-)

Glad I am not the only one who thinks CSS sucks.

I have yet to see one site that looks attractive when it is done with 100% CSS. As a graphic designer, things I do I want them to look good. With CSS it is just not possible.

it might work for a blog, but who the hell wants to sit around a design blogs all day? Real companies want websites that look good, usually looks are above the content they have there. And, out of the 100 websites I have designed in the past 3 years, I can say there was not one customer who was concerned about their site being seen on a palm pilot, cell phone, or by one of the browsers blind people use. They were all 100% more concerned with how the site looked, and if it was easy to navigate.
It is just not possible to make a site look good in CSS. I would love for someone to prove me wrong, but in 2 years of searching, I have not seen a visually attractive 100% CSS site.

Methinks the CSS advocates in this discussion doth protest too much. Ad hominem attacks on the intelligence and competency of anyone daring the question the "tables are evil" dogma convince us skeptics of nothing but your lack of a substantial argument. I found this posting by typing "CSS sucks" into Google, not "CSS advocates suck".

Some aspects of CSS are indeed powerful and elegant. We don't want to return to the day of multiple nested tables with font tags in every cell and 1 pixel clear gifs. But HTML and CSS provide very poor support for some very common constructs -- column layouts and forms among them.

The float property is intended for wrapping text around an image or other element. The W3C CSS specification states that it declares an element "to be outside the normal flow of elements". Using it to create a column layout is a hack requiring non-intuative margin settings in other elements to prevent a longer column from wrapping underneath of a shorter one. BTW, if you test the above example you'll find that it doesn't work. The "content goes here text" is shifted off of the page. You need to set the left as well as right margins of the #content element to 240px.

The same layout can be accomplished with a table with roughly the same amount of code. Try it and compare it to the floated div approach in the following test:

1 - Set background-color properties for the header, content, navigation, and footer in both the table and non-table version.

2 - Set the height of the content_wrapper element (second row of the table version) to some value, say 400px. Notice that the entire content and navigation areas have the background color (almost certainly the desired behavior) in the table version but only the text does in the floated div version. One might think that setting the height of the content and navigation elements to 100% would solve the problem, but it doesn't quite work that way. The content column background fills as you would expect by it wraps underneath the navigation column. You have to explicitly set the navigation column height to 400px to get the desired appearance (yes, I'm sure there is some other way to do the same thing, but who want to bother figuring it out).

3 - Resize the browser window to a very small width. In the table version the columns shrink until the text cannot be wrapped any more and then a horizontal scroll bar appears. In the floated div version some of the text disappears completely (because of the funky margin settings) until it finally appears underneath the navigation column. Yuck!

Can anyone offer a cogent technical reason that a table should not be used in this situation?

I'd like to add to this and challenge any CSS advocate to point me to a site that is 3 columns, fluid and completely separates layout and content - i.e. no extraneous wrapper divs or clear divs. CSS just isn't up to what it sets out to do.

Also, if you have a site that has 100s of pages, you really should be using a CMS and that means you only have one template to edit to change the layout - this is true separation of content and style.

I hate CSS positioning.
It's unintuitive and needlessly complex.

A three column layout is not rocket science. It should not require hacks and miles of mark-up.

Aligning a couple of elements on a page with precision should not be a difficult task - hell, precision is something computers EXCEL at!

And you can't blame it all on the browsers. If they all interpret the "standards" differently, then perhaps the W3C has been to ambiguous in their specs.

Why, whenever I attempt an all-CSS layout, do I get the feeling that I'm trying to make CSS do something it was not intended to do?

Sure tables are inelegant, but they work, and I'll continue to structure my overall page with a single table, standards be damned.

and yeah, using a table for layout is a hack in itself, but I have the choice between a single hack that will work on most browsers consistently, or using a whole lot of obscure workarounds for individual browsers leaving me with messy mark-up and a headache.

And quite frankly, I don't see how using a whole lot of nested DIVs is better code than nested tables. Back in 1999, I remember one of the biggest selling points of CSS was the fact it would do away with complicated nested rubbish.

Yeah, right.

Mia, you frickhen rule. That was so damn honest.

I shit on CSS.

Ah, I love you guys...

Wow, this thread has been going for over two years!

I'm currently learning CSS and it only took me a few days to come upon the whole 3-column layout, holy-grail, whatever you want to call it. I thought "Eureka! Here's what I need to learn! A marninally complex layout in CSS. Now I get to see what CSS is really capable of".

I was stunned to find the authors of the tutorials tap-dancing around all kinds of browser bugs, employing all these bizarre ultra-wide margins and floats and at the end still handing out caveats about compatibility. What part of "Standards" is this?

It certainly made me feel better about the fact that I've continued to use tables for so long. I could crank out an ugly table-based version of the layout in minutes and have it work on just about EVERY browser.

I can see the need to move away from tables and I can see the benefits of CSS separation of code and content, and I think there are some truly great things that CSS has to offer. But there's a simple fact to be faced: CSS just isn't there yet as a web layout solution. The anti-table CSS proselytizers aren't acknowledging reality.

If you are a developer you may not like css because it isn't necessary if you are making a very plain layout like 99% of the sites on the web.However if you area designer and and you would like to build a complex design with overlapping elements CSS is the way. CSS will save loads of time when making style changes site wide. If you only do work on sites with 3 pages it won't be as useful to you. However, anyone who says they are a hardcore web designer or developer must learn how to use CSS. If you are complaining about CSS and how hard it is to implement you should bitch at IE and their lack of standards. Cheers CSS rules tables are for databases and spreadsheets.

Ok.. so this is my take on css. It's alot like communism. I'm sure it's wonderful in books, but, in real life scenarios. It pretty much blows.

I used to crank out a really light weight table layout and i knew for sure how it looked on every browser. Blame, ie6, mozilla, safari, your mother, etc. for it's incompatibilites... I don't care.

The bottom line is that css forces you to reinvent how you design. It's more time consuming and frustratring. And in the end the only thing that really looks great is the "view source". lol...

The day all web browsers get their shizzit together and make their browers work identically is the day doctors and receptionists make the same salary across the board.

Obviously this is coming from someone who is rather frustrated with css.

Ironically tho. If you are someone who fancy's a real challenge, you can learn to appreciate css uses.

It's been a double edged sword for me.

I have been found guilty of advocating the less layout at work. Today is my last day creating sites in pure css and xhtml. Its like crack for coders you know its bad but you just want more.

Im done with this css shit im out...
Just after i get my wrappers working right on this site....

CSS is great... for styles (fonts, colors, borders, buttons, etc) but for complex, solid layouts that behave consistantly cross-browser, tables are so structurely intuitive, it just makes sense.

A 3 column flexible layout with a footer in html?

[table width="100%"]
[tr]
[td width="xx"] left [/td]
[td width="xx"] content [/td]
[td width="xx"] right [/td]
[/tr]
[tr][td colspan="3" align="center"] footer [/td][/tr]
[/table]

It's so clear and basic, it's the reason why there are so many personal websites today. In CSS there is so much you have do to make work correctly. And when you minimize the browswer window, making it narrow, content starts shifting DOWN and tearing apart the layout. Sure min-width is great, but IE doesn't support it, so you have to do some pretty FUNKY hacks just to emulate it. I don't want to feel like I'm solving a riddle when I'm making a website.

CSS and tables are meant to work together, I don't think it was ever intended for CSS to replace tables. Ever try to make a 9 row x 4 column table with css/div's/ul/li? I have, it works, but I want 2 hours of my life back, because I could've just made that same table in less than a minute with a html table. And these are just BASIC layout examples, for coding anything more complicated than a 2-3 column blog, laying a site out without tables would be like building a house in outerspace.

Using tables for layout is the worst thing you can do. Go research in google, you should find something that tells how to do a 2 column layout. I can do it from head.

ed,
If table are so bad , then why is the login button on your site completely off to the right
of your css laden site? I can't even see it without having to use the horizontal scroll bar.

http://www.em-webs.com/

Have a good time making it look okay in IE. I don't think I've ever seen a table do that.

A quote from the w3c website http://www.w3.org/Style/Examples/007/center.html:

"CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3."

This was written in 2001; has there been any improvement on this SIMPLE issue since? Vertical centering is so fundamental to layout and should have been one of the first items addressed in light of the basis for the box model concept.

Please, someone tell me I'm wrong. And I don't mean by assigning the properties of a table cell to the div in question as suggested by the example page here.

if w3C thinks CSS is so great for positioning, why are they using tables in the layout of their contact page?

http://www.w3.org/Consortium/contact

wow, I really though it's just me hating CSS. I really think it's crap, by design. The concept is good, especially when you can change one file and change a large section of your website at once. The reality is that, yeah, CSS sucks. It's a seriously flawed implementation of a good idea, not a wonderful idea, it's not that exciting. I have no clue how it became so popular.

Ha! Yeah http://www.em-webs.com/ your button goes way off right on ie 6 and 7. I love ie! website will never be this fun with out it!

I don't think "Using tables for layout is the worst thing you can do" as ed said.
Table is one of the best hack which will always work in most of the case including your case too!

Don't get me wrong, I am extensively using css too. but table is not that bad especially when you have to get something done fast with little to no problem on all browser today.

I found that table mix with css is the best way for me.
Whatever less problem, fast will work.

As mentioned above, CSS for layouts is horrible. I'm not myself a designer, but the fact that there are sites that have to explain how to do three column layouts is a red flag. (And then when you actually look at the examples in IE6, the columns overlap each other...blech.) No doubt there are designers where I work who can get CSS to do what they want. But they have to hack around with it for half the afternoon, and then they are so proud that they got the footer to attach to the bottom of the browser window, or a div to stop dropping under another div, or whatever, and they had to use weird garbage like "w\idth: 80%" (the backslash is intentional) to make things work. If experts have to hack around with it that much to make things work, that means CSS sucks.

Thank god for people who still have common sense. There was a time when I bought in into all of this CSS crap and thought I just needed to learn more to achieve nirvana. Well I learned, studied the W3C specs, and I found out that CSS positioning was designed flawed. It simply can not work, and guess what? It is not going to be fixed - because it is a "standard" now. Somewhere somebody made a mistake with the box model, and few other things and now CSS can only gain complexity in hopes of masking the mistakes. CSS is a great tool for styling, but it will never take over positioning, because no one really wants it to take over.

If CSS were meant for layout, would it not be called Cascading Layout Sheets?

The argument that tables weren't meant for layout is weak. Of course they were meant for layout! That's exactly what they were meant for!!!! Creating grids!!!

On the other hand, CSS was not meant for layout. It was meant for styling.

Tables are the engineer; CSS is is the interior decorator.

You can argue about the definition of tabular data, but allocate some time for arguing about the definition of styling, too.

~

OMG~! Thank-You, THANK-You, THANK-YOU~!

I built my first web site in 1999 (went live Jan. 1st, 2000) using only notepad and pretty much copying Yahoo's site layout (table based w/header, 3 column, left nav, footer, etc) after reading a book (the venerable Laura Lemay) on tables, frames (yuck!) and CSS (skipped this section) and then sold guitars all over the world from this SIMPLE and FUNCTIONAL site.

Since then I have designed sites for myself and others (some even paying clients), learned Linux / Apache enough to manage my own server(s), repair and program computers for fun and profit (I own Macs, PCs and Linux boxes) and have learned almost enough of several programming languages to get myself into trouble with them.

My latest "commercial" web site was for a friend just recently (12-07) and I used a DW / CSS based template (for the first time ever) to get started and finally play with and attempt to learn about this thing called CSS and "how great" this is and how it is suppoed to change the way that we design for the web. I actually felt a little stupid for having done MANY sites and still having never learned this "irreplaceable" tool.

OK., so using CSS in order to change site formatting of text colors, backgrounds and other attributes seems SO intuitive that I wondered what took me so long to learn / embrace this technology. It is like NOT using templates in order to update a 200 page site., crazy and why would you NOT use this?!??

BUT., then looking at the "layout capabilities" of CSS was making me NUTS., watching my neatly designed elements move all over the damned place, almost at will whenever another element was resized or changed, and then not even being able to figure out (in the few hours in the day) certain other EASY layout tasks that with tables would have been CAKE., I finally today in frustration typed into Google, CSS LAYOUT SUCKS and found THIS page., YEAAAAYYYY~!

Thank-you folks., now I do not feel so bad., or like the IDIOT that I was starting to think that I was because this was just NOT MAKING SENSE., at least not in the three weeks that I have dedicated to this. Granted, I did not spend as much time on this task as I spent learning Linux / Unix to set up my first server box, but PLEASE., we are talking about SIMPLE freakin' LAYOUT that tables has done just FINE all along.,

AND the cross browser layout is as expected, which is critical if one is designing for the real world (WWW) and not for ones personal fancy. Hey, you CSS wizards out there, if you truly CAN do whatever you want with layout (and I mean SPECIFIC positioning!), then fine., but why should I have to search the 'net all afternoon to try to figure out how to do one normally very simple layout task?!?!?

Perhaps I am just not "getting it" yet., and that CSS layout truly IS "elegant" and do-able., I don't know., but I actually have other things to do in my life and spending two weeks to learn how to finagle some convoluted code in order to place an element FIRMLY where I want it on a page is just not practical., especially when my intuition tells me that this is NOT an exact science since the code to do this looks like CRAP.

I would love to hear from some CSS "expert" and then give them an example of a complex page layout that just does not seem to be possible using CSS, but is otherwise SIMPLE using tables with proper padding, spacing and sizing. Perhaps tables are not the most elegant method, but they WORK and work consistently and easily. Does CSS do ALL of this AND do it ALL of the time?!?!?!??!

If CSS layout is not ALWAYS precise, definable and AS EXPECTED, each and EVERY time and in ALL browsers, then WTF., if I have to spend three days playing with crappy code and STILL not get ONE element to STAY where I want it on a page in EVERY browser., then WTF., if I want to use CSS for a SIMPLE and straightforward BLOG or personal site and not worry about EVERYONE seeing the EXACT same thing., then fine., but otherwise., WTF~!

I am now going to continue on my quest to learn the PRACTICAL aspects of INTEGRATING tables with CSS and using them BOTH to do what each of them does best, rather than trying to bang my head against the wall in order to get relatively simple design elements to sit right where I put them on the page EACH and EVERY time using CSS in order to do this., YEEESH.,

Thanks again.,

AK

~

Thanks for the posts and comments. I have been trying to design some layouts in CSS and they just suck... even the simplest thing CSS fails at. Today was the last straw on trying to do any kind of layout in CSS. I was reading how to do a 3 column layout and clicked a small unassuming link for known issues with the layout and there were about 5 pages of exceptions and problems with various hacks to make it work ok in most browsers. But they couldn't even make it work right in all major browsers and this is from the so called experts.

Today I did a simple div with a width of 600px. Inside of that I put another 2 divs with width 100% Then I made an additional div and added a 10 px left padding in the second div. If you pad the div it will force the right side out 10px past the containing divs 600px that encloses it.... WHAT???!!! How does that make sense? This is basic stuff and why CSS sucks so bad at layout. I will use CSS to style fonts and divs but for any positioning I am just going to stick with old school proven techniques. Thanks for the post and its nice to see I am not the only one totally annoyed with CSS.

I've designed and developed (and sold) a LOT of websites for a LOT of money, and I can tell you that all of these "standards Nazis" that insist that table-based layout is blasphemy -- well, they have their heads in the sand. They'd obviously rather "look smart" than actually design a productive, good-looking, money-making website.

Now, that's not to say that CSS itself is "bad". I use CSS all the time to apply fine-toothed detail to things. But when it comes to the "shell", I use tables. Not because I'm "pro-tables" or "anti-DIVs" -- rather, only because I'm smart enough to use what works best for a given task.

Cross-browser rendering of tables is nearly (if not exactly) identical across the board, whereas there is plenty of discrepancy with DIV rendering. That said, why tweak, and then tweak your tweaks, etc.? Why not use what works -- especially if what works not only works BETTER but is EASIER to boot?

It's amusing, really... I came across an article recently touting DIVs over tables for "bandwidth efficiency" and all-around better design practice. The article then presented a table rendered first as a TABLE, then as a DIV. The DIV version was "oh so elegant", or so they'd said. The amusing thing is that when you look at the article in a variety of browsers, the DIV table was rendered inconsistently, whereas the TABLE version was exactly the same. Specifically, the table in question had a dotted pink border. When the border was "reproduced" using CSS, the "dotted 1px" style was rendered differently across browsers. In IE6, in particular, "1px dotted" turns into a dashed, choppy mess than gets even messier as the page scrolls.

Now, this may seem minor to some, but in my eyes, it's the polish that matters. That extra attention to fine detail... that's how you set yourself apart.

Now, of course, you're going to get those moaning about IE and its poor standards adherence, etc. You know what? IE6+IE7 still represents 2/3 of the browser market share. Quite frankly, I don't care if IE is "broken", or non-compliant, or whatnot. All I care is that the sites I design look as similar across browsers as-is possible. That said, I'm also not going to spend loads of time devising hacks, tweaks, ______ (call them what you will) to make "smart people" techniques work where they're just not suited. My time is much better spent improving the features and functionality of sites, not making the underlying framework meet the standards-du-jour.

The bottom line is that I care about the END RESULT. I care about providing the best user experience. I care about delivering new features. I care about developing creative, innovate websites.

Unless you're digg.com where the majority of the user base is of that "smarter than thou" mindset and would rather appreciate your site's markup than your site's content -- stick to delivering the best experience for the user.

I'll close with this... when I develop a site, in the back of my mind, I'm thinking about killer new features and a massive user base, not fancy markup. There are plenty of sites out there (big sites as well as HUGE sites) that have sold for gobs of cash. Was the buyer buying because the site was table free? Not hardly. They were buying an idea, a market, users, a site that people use. Spend your time on the areas that REALLY matter. THAT's smart development.

Did the same as some of you. Out of pure frustration I typed in "css sucks" in google and tada I found you guys. I tried now for 2 days to arrange some really simple stuff with DIVs and CSS what I could have done in Minutes.

I already wasted hours trying to create 5 Tabs whereby each tab has a Background image, and Text. It's almost impossible to get those *@#%�! DIVS into one line with a specified width and height. One of the reasons why Tables aren't recommendet are screenreaders and stuff like that. But since they are so good for positioning, why the heck did the W3C not specify a layouting table!

So, now I'm gonna fix my problem with a table :P

Tommy, there is a way to do what you want in CSS. It's just that it isn't obvious. What you need to do is use an unordered list ul/ul with the tabs as li entries, then use the style sheet to tell each of them to have a background-image (which therefore has fixed height and width). The final trick is then to tell the list (via ths CSS style sheet again) to diplay "inline" (in sequence across the screen) rather than spaced out down the page like a normal bulleted list.

It does work well, honestly, and it is used alot in CSS design. One advantage is that you can qucikly change your backround images or the size, style, layout of your nav tabs just by manipulating the CSS once you get used to it.

But I agree that having to control tab layout via "lists" (and even deeper anomolies with floating divs etc) is a sure sign that the W3C project didn't even consider grid-like onscreen layout when they were developing CSS. They all come form a coding or "accessibility" background with very little appreciation of what graphic design means and how it works. So the lack of a decent layout model in CSS two has meant odd using ingeneous workarounds like this. They are trying to listen right now with a promise that CSS3 will be better... We'll see.

CSS does work extrmelely well for many things, but it is hard at first for visually driven people to design by remote control, as it were, via the style sheet instead of directly manipulating elements on the screen. You do get used to it and there are alot of advantages. But basic strcutural composition is a real pain in the neck.

It helped me to understand that a "div" is not a box or a frame as such, but just a semantic device for grouping html elements together. It can be turned into a box by giving it some border, margin, padding properties. Yeah, the positional model sucks and should be improved, but it's the way things are and we all have to learn to work with it I'm afraid. The trouble is you can't just dive into CSS with the old table/grid mentality, you drive yourself nuts. I know I've been there! (But I got better...:-)

CSS, what the $^%&$^*#&^%$?

Just spent two days trying to figure out why my divisions show up different in every single browser.

The mighty div gag!

10 pixels to the right, 50 pixels to the left, absolute here a little relative there, ... hmmm maybe static positioning ... nope ... how about relative ... nope ... a little auto height ... that took out the whole page ... *&$%^*#&$^!!!

I am going to jump in the lake and its -20 below zero! It'll be fun compared to this CSS crap.

wow this thread refuses to die..and in the years that have passed Tables STILL are the most stable, easiest, and cross-browser compliant layout method on earth.

An all-css div layout is STILL buggy, unreliable, not very cross browser compatible, extremely difficult, reliant on countless 'hacks' and tricks. etc.

a Three column expanding layout is STILL impossible in CSS, every single example ive ever seen breaks when you change the window size sufficiently or use a different browser.

That 3 column thing is easy as pie in tables. If it aint broke, dont fix it. Tables work. Period. No reason to switch. By all means use the left column of your table to have the menu, and put a div in there to style the left menu, but tables should still be your mthod for general layout.

In a way, Im glad most of the internet has gone insane and is attempting to design stable layouts in CSS divs only. Because it ensure I have tons of gainful employment in the years that follow fixing these ridiculous, css-div based layouts that rely on a 300 page css file to "work" by converting them into nice, stable, table-based layout.

have fun with that expanding 3 column layout css gurus!

BLARGH. CSS is making me f*ing crazy. I have started to sound like that old guy who's always saying how his 1935 Ford pickup beat the pants off this new fangled technology. But the thing is - He was right! And so are you! Tables for positioning!!!! It just works. And I can tell what I'm doing!
So don't listen to these kids who've been raised to think that CSS is better for all things. It's not.

Here's an example of what's wrong with CSS for layouts:

www.insofar.com/css/x.html

All I did was take a csszengarden layout and remove the "p" tags. That is, I removed the 'content'. It breaks. It breaks because they are relying on the space taken up by content to force their background elements into place. This is not "separation of content and layout". It's just broken. Note - I didn't touch the CSS file, I just took the 'p' tags out of the HTML.

If I can break the supposed 'gold-standard' of CSS layout (csszengarden) by changing the content then I have to say I rest my case.

PS - You could do this layout with tables a lot more easily and it won't look like poop in different browsers.

Use CSS for whatever you want. Hell, make a DIV tag inside each TD and deal with it that way. But use tables for layout and you'll be happy (well.. happier).

We have 3 web sites. The most recent website developed from the former web designer was a 2 column header footer and left menu (hacked css list) CSS layout. I have a pretty good experience whit html/css but a simple request to add a third column to this layout took me days of hacking cursing and testing and finally when it worked on a browser it will not work on another, new changes as a different image size or adding a new banner required ridiculous amount of time hacking trough the SEVEN styleshit files. I finally convinced my boss that for our site, that is constantly growing in pages and require very frequent updates css is not the way to go, too time consuming.
Got the Ok and in 2 week I changed all the site to a 3 column table layout all the pages to php and moved menus, nav bar and side columns in include files.
Now I started to love my job again.
I can confirm once again CSS SUCKS!

Dario don't bash CSS just because your too lazy to learn it.

lol this page is so stupid theres nothing hard about css whatsoever. Maby you shouldn't be doing web design if you havnt got a grasp of basic css yet..

As someone rightly said above the web is supposed to be an accessible medium to all. I had no problem learning PHP, I learnt HTML in about 5 minutes but I HATE CSS.

The best excuse I have heard for championing CSS in favour of tables is that it is supposedly less confusing for a screenreader than tables. But it is still a lame argument!

The solution to having screen readers choke on tables is
1. To have two kinds of tables: (i)layout tables and (ii)explicit tables for tabular info.
plus
2. Develop markup that enables designers to tells screen-readers and other devices the sequence in which cell contents in layout tables should be read, a bit like tabindex does already for links and forms. Easy!

CSS Sucks!

You could try to put the two columns into a single container div and then set one to float right, the other to float left.

If you specify the div's width, you can then divide the two columns into the exact widths you want.

Relative position on the 'expanding' column might achieve the word wrap effect you want.

Richard

IE5 and mac positioning styles must be absolute. This sucks when you want a website center aligned. Can anyone give me a link to an example that uses css and xhtml that is properly centered on a mac? Otherwise I guess I will make all of my websites left aligned or just go back to tables.

BTW - How can floating an object be good. I was always taught that using x and y coordinates is very incompatible across browsers. I'm just confused on why this is considered the new standard but it is very incompatable among browsers and can take hours to layout a simple website. I just can't see the advantages to this.

Just look at the veritable *industry* that CSS has created in ways to achieve 3 column layout with columns of equal height! What a frigging riot!
The one thing that everybody wants to do with layout - CSS makes into a ridiculous Herculean effort- and most of the solutions - maybe all of them, have all kinds of bugs, hacks and restrictions!

Ha! - CSS is BROKEN BY DEFINITION.
It makes the goal farther away than ever before!