This could easily be titled ‘How I Was Afraid Of CSS Layouts But Learned To Love Them’. For years, like most designers, I used tables for creating client websites. The reluctance to embrace CSS tableless layouts was based upon the typical time constraints of having to learn yet another new web coding practice. I have, however, used plenty of CSS for formatting and styling. Just not for the page layouts.

First, i’m not a total ‘CSS Guru’ by any means. I StumbleUpon many sites when I have time to surf the web and happen across lots of great sites that explain and show example code and how it affects various aspects of your layout. These sites have greatly helped in making the transition to full CSS layouts and the use of more streamlined code in regards to HTML tags.

This has required adapting to various DOC_TYPE statements as well since the CSS can behave differently (or, not behave at all!) depending. There were several ‘keys’ I had to focus on that helped me get past the initial frustration of spending hours figuring out why the layouts were breaking in places. Here’s some of what i’ve learned:

1. How to work with <div>’s for creating containers and page sections instead of tables and cells
2. How to align the <div>’s so they stay where they’re supposed to
3. How to style the <div>’s so they take on the look of individual elements of the design
4. How to create cool styles for rollovers, dropcaps, and even navigation without javascript or images

Here are a couple of examples of my latest projects showcasing zero tables used in the actual construction and layout of the site. Every aspect of the design is constructed with a <div> or a <span> and tables were only used for the display of data. Even then, the tables were heavily styled with CSS.

In this first example the page is divided up into several <div>’s using plenty of padding and margins to space it out where it’s not congested and easy to read.  Many of the images are actually backgrounds controlled by their respective <div> id or class. All positioning is done via the external CSS file and, if any, no inline styling is used.

[nggallery id=3]

In this next example we created a series of headers so that the image of the people would change from page to page instead of consistently being the same header image. To accomplish this I created a series of #header <div>’s and miscellaneously distributed them around the site.

[nggallery id=4]

The major key to all the elements coming together was learning the float: methods and allowing for the widths and margins for each <div> that make up the page. For example, on the first sample above their are two main <div>’s in the main content area which, in turn, contains separate <div>’s with the text and images.

Here’s an illustration I found extremely useful in figuring out positions, margins and padding settings.

CSS width, padding and margin help