Since the dawn of time, web designers have used tables to build sites that adapt readily to the various screen settings with which people access the Web. But, in practice, any complex table-based layout is going to end up a mess. The new school tells us that search engines and the W3C hate complex nested tables, and experience tells us they're a pain in the ass to maintain.
Thankfully, CSS gives us numerous tools for creating fluid layouts. They require more practice than the bloated grid nested tables provide, but keep the code much leaner. Here are just a few tools for creating fluid layouts in CSS:
float
"Floating" an element allows you to move it to one side of its container, automatically flowing the rest of the content around it. This is one area where CSS improves on table-based layouts by a degree noticeable even to those who aren't Web standards wonks. To create a fluid sidebar in a table, we have to surrender all of the space below it, or artificially break the content across two rows. Float lets the sidebar use only the space it needs, then gives the rest of the content use of the screen's entire width.
Resizable text
CSS gives us the tools necessary to allow users to change the size of text on a page. Even in Internet Explorer. We can use CSS to look at the size the user is currently viewing the page at, then make certain text some percentage larger or smaller. This beats the heck out of hoping everyone is viewing at 12pt and making fonts larger or smaller relative to that size.
Negative margins
Negative margins are great. An element can be relatively positioned, so that it shows up in the next available area on the page, but we can make positioning adjustments from there without removing it from the flow. Negative margins can also be used for helpful effects like centering. Here's a centered DIV that doesn't require any ugly deprecated tags:
div#centeredDiv {
position: absolute;
top: 20px;
left: 50%;
width: 400px;
margin-left: -200px; /* half the width */
}
Moving blocks inline
Another cool thing CSS can do that tables can't is stack block elements horizontally. If I have a page of thumbnails in DIVs containing some information, I can use CSS to fit as many as possible on one row (minimizing vertical scrolling). To do the same thing with table cells, I have to choose at design time how many thumbnails will be visible in a row, and that number is consistent for all screen sizes. (I can also do this trick by setting the width of the DIVs and floating them all to the same side.)