Filed under: Design, Developer, Utilities, Yahoo!, Design Tips
Easy CSS Layouts with YUI CSS Grid Builder

In the world of web developers there are two standard ways of laying out a web page. The classical way is to use tables and structure your web page like you would an Excel Spreadsheet or a Word document. The second is to use Cascading Style Sheets that let you create elements on the page and position them according to your needs. For a large variety of reasons CSS based layouts are the way to go: they use less code, they are more customizable, they support various effects that aren't possible with tables, and they run faster in modern web browsers. The problem? They are darn hard to code!
Enter the CSS Grid Builder from the good folks at Yahoo!. Yahoo! has spent thousands of hours crafting web pages and testing them across all the possible OS and browser combinations (yes, even Opera). The end result of all this testing was the public release of the Yahoo! User Interface CSS and JavaScript libraries. The CSS Grid Builder is a simple web-based interface for quickly creating any number of layouts that rely solely on YUI's CSS files. This gives you the advantage of easily and visually laying out designs without using tables, and they will work the same way in every popular browser
Get a WordPress.com Blog
So, just how good at time waster games are you? Think you've got the stuff? Well, The World's Hardest Game 2.0 doesn't think you do.
Yes, amazingly, it's possible to have a sequel to a game called "The World's Hardest Game". It doesn't seem logically possible, since if the first one was actually the world's hardest, how could another one come along and share the moniker? It made me doubt the name in the first place. That is, until I tried the game.
The mechanics of the game are very simple. You are a small red square, ...

Reader Comments (Page 1 of 1)
Eric M said 6:16PM on 9-24-2007
Tables aren't a standard. Tables are an archaic relic that only people who design in Frontpage use.
CSS is the standard. They aren't too hard to code, you just need to know what you're doing, obviously.
The problem is that people are just to lazy. The more and more people that don't know how to actually craft a well designed page, that are web accessible and follow W3C standards, but get jobs because they took a 6 week training course on how to use web gimmick editors, the less money the people who know what they are doing make.
Sorry for the diatribe. But I really hate these programs because they make it look easy to the people in charge who have no idea what it really takes to make a web page. Therefore they don't appreciate work.
Reply
Dan said 7:34PM on 9-24-2007
Jane,
Sure, for the people who actually invested the time and money in a university to achieve their goal to be a programmer might have reason to be miffed at programs such as these...but what of the majority of the population who were too busy making a living or didn't have the opportunity to go to college to become programmers as yourself? What about Joe and Judy Lunchbucket who have an interest to delve into the realm of the internet to make a plot they can call their own. It would seem that programs such as these would be a Godsend,allowing them to reach beyond their grasp and achieve a little something that in all reality doesn't belong to anyone. Your archaic (if I might borrow a term) attitude reeks of elitism and as a tool is used to hold the common man(and woman) down so that you might look down from your lofty perch and sneer at the little people. I say, set the people free to explore and discover beyond their means, and if nothing else,boost their self esteem and dreams that they,common as they may be, CAN dream and achieve beyond their wildest expectations!!!
Good night, and may the good news be yours
Reply
Eric M said 8:39PM on 9-24-2007
No, sir. It is you who reeks of ignorance. You know not the ramifications of what you do. You should spend sometime looking up web accessibility standards, interface designs, and aesthetics. Then you might realize that there are people out there who are blind and can't view web pages made by uneducated people, web pages that frustrate users because they figure out where things are, and people who can't read the page because they are color blind and gray text on a white background isn't legible.
Oh, and while you're educating yourself on that, pick up a book on grammar.
Reply
james 42 said 11:47PM on 9-24-2007
"Tables aren't a standard. Tables are an archaic..." Blah, blah, blah. Totally wrong, tables are part of the HTML 4 standard. And with good reason, they offer a very useful way to display tabular data. Dumping on them is as uniformed as picking any other tag, say like definition lists, and saying it should not exists because people have told you it's bad. Any tag can be misused, but the ongoing attack on the tables is just flat out FUD.
Anyone who starts talking about 'The Standard' in web technologies is only proving they don't have a clue. Go make a complex web site that is based solely on the standards and you'll have a site that does not render properly in any browser. Real standards gurus understand this and take a balanced approach to web design creating, at the end of the day, a site that works for their clients.
Reply
Rob Goretsky said 11:07PM on 9-25-2007
Rob Goretsky says I believe there's a middle ground between the comments that have come before me here. As a CS Major, I understand the art of hand-coding, when appropriate, according to rigorous standards.. But, I also do believe that a lot can be gained from using a tool such as this to study the code it produces. Perhaps the code will be junk, or perhaps you'll learn a trick or two from it. Comment from Rob Goretsky
Reply
protoss said 5:58AM on 9-25-2007
Web designers are programmers?! Since when?!
Reply
james 42 said 8:00AM on 9-25-2007
@protoss, HA-HA, (or LOL, your call) good point.
Reply
james 42 said 8:02AM on 9-25-2007
To clarify protoss's point HTML is a Markup Language, not a programing language. And as such, is simplistic by comparison.
Reply
Eric M said 10:03AM on 9-25-2007
James-
I should clarify, tables for layout is a bad idea, for numerous reasons, web accessibility, load times, preventing incremental loading. etc.
Tables for data is different.
Reply
kingkool68 said 10:46AM on 9-25-2007
Yuck! Yahoo! made a clunky tool. Check out http://builder.yaml.de which makes it much easier to build a more flexible layout in a split second. Ofcourse you are still going to need to know some HTML and CSS to get a finished website, YAML makes it quick and easy to get off to a bare-bones start.
Reply
dominicneagle said 11:00AM on 9-25-2007
Now, now, children. Let's all play nicely.
At the end of the day, it's better to use standards wherever possible. It isn't always possible, of course; and it depends on exactly who your site is for and what they need it to do.
Tables shouldn't really be used for layout. They're designed to display tabular data, and they do it well, but they were not meant to be used to structure your pages. It's very hard to update the content of a table-based site (simply because of the complexity and size of the page code, and the website as a whole), and they can be a nightmare to style as well.
Anyone learning HTML should try and use CSS from day one. Learning to use tables for layout purposes in this day and age is like preparing to fight in a modern war using bows and arrows on horseback.
Which is another reason to avoid the less reputable WYSIWYG applications. Not only do they promote bad use of code, but the companies who make them make millions of pounds each year because new developers don't realise they can produce much better results using just Notepad and SmartFTP - all for free.
At the end of the day, if you're going to do something, do it properly. It's not always possible, and that's where these little WYSIWYG apps come into play, but for the most part, if you don't know what you're doing, at least pay someone who does, and don't throw your money away on useless programs because you dont know any better. Some people have spent a lot of time and money training and practicing to build you a better website than you can do yourself, so give them the chance to show you why.
Now go, my pretties, and learn!
Oh, and whoever said web designers aren't programmers wants to have a word with themselves. That's like saying because you're a programmer, you can't design anything. Obviously there are people who can do both, and both programming and designing require the skillsets of logic and imagination.
Reply
Eric M said 11:37AM on 9-25-2007
Dominic, amen.
Although I'd have to agree that web "designers" aren't programmers. I would more or less classify it more as coding (HTML, CSS, etc). Web developers on the other hand (JAVA, PHP, .Net, etc) are programmers, at least to me. However, like you said, there are people that do both.
Reply
james 42 said 11:43AM on 9-25-2007
OK, my rant it over. But, a table for layout does not have to be a bad thing. I know that's controversial, but it's true. One table used to break up the page content on a small static site has really no downside. Granted, you can't as easy reshuffle the TDs as you could if they were DIVs, but then who really does that anyway? It is no different then using DIVs with class names like "boxright" and "boxleft". No different at all, both break the idea of standards based, semantic markup. But only nominally.
Now, I have had to work on sites with seven nested tables. How the original designer got there is a complete mystery and it was so bad I could not stop laughing. I'm smiling just thinking about it. I'd put it on the same level a painting of dogs playing cards. So I have seen the dark side of tables for layout. And with CSS where it is now, tables for layout are not really needed, but still sometimes it's just easy and makes more sense. And there's never any god damn peek-a-boo bugs with a table (thank you very much IE).
Reply
Alex Moore said 1:59AM on 9-27-2007
I agree with Eric M in that tables really should not be used for display purposes, however, when time is running short and you just can't get that darn div to get in the right place (typically works fine on firefox then not on IE, etc etc), those tables sure look like an attractive option.
Reply