Multiple Columns in CSS while maintaining fluidity

How many site designs use more than one column? Practically every site uses more than one column. Either for content or for navigation. When I was in my design-by-tables stage it was very easy to create a new column and BAM!, yet my first CSS site used three columns and it seemed that I could never get it to look right. They were supposed to be fluid and change as the browser window’s size changes. I never really knew how easy it was until I was shown.

A month or so back, I was reading a post on a forum I frequent that was covering this very topic. Dave Reeder made a perfect template for fluidity and I thought I would pass it on, so others can benefit from a wonderful example of a multi-column css layout. This example shows one column, two columns, three columns, and four columns of css delight.

Visit Multi Column CSS Layout

2/7/07 link updated

Tables are for data, not layout

I know that in posting this there are people out there who do not agree with me and thats ok, to each their own right? Wrong. Over the past few months as I have transitioned myself from a self-titled king of table layouts to a rookie with CSS layouts. I am often pressed why is it so wrong to use tables, if it looks good and the user doesn’t know the difference why should it matter. I have tried several approaches to answering this question and it is quite valid. If the user is all that matters and a site can be served with a pleasing look and a functional base whats it matter if the layout is done with tables? Makes sense doesn’t it?

Sure on the surface it may look good, it may even function flawlessly, BUT it isn’t made correctly. Tables were original used for layouts because the existance of CSS wasn’t widely accepted by all browsers. Those browsers are now in yesterday’s trash of the past. In comes browsers that follow and render pages that follow the web standards. Tables were originally intended however for tabular data and can now be utilized as such. I was reading my newsfeeds a few days ago and came across an article that articulates 5 reasons to design with standards.

it is possible to develop web pages entirely using standards-compliant CSS, which opens up a new realm of cross-platform compatibility, improved handicap accessibility, printer-friendly pages, and easier-to-update content.

It has also been suggested that using standards inhibits creativity and limits the designer. You have got to be joking. Here are a few sites to look at to dispell that: 9Rules, CSS Zen Garden, CSS Beauty, Style Gala, CSS Reboot, and the list goes on.

Before someone jumps down my throat and posts all sorts of standards nut, table-hater, and stuff like that comments, let me say something. Tables are not dead, and they should not be treated as such. There is still room for tables and there are still times in which tables are called for and are quite prefered when displaying data.

Forward compatability when using CSS is key. If web designers design, code, and serve their pages following some sort of standard it makes updating older sites much easier. Isn’t that what we are after all along anyway, something to make our jobs easier in the long run?

Till then… Stay Focused.

Lightbox JS Photo Gallery

Lightbox JS Photo Gallery is well… there is no sense describing it any different than they do on their own page.

Lightbox JS is a simple, unobtrusive script used to to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

I have been looking for a photo gallery to display pictures either personal (family), portfolio type, or even screenshots. This one will fit the bill nicely, as it will save people from actually leaving the current page. As they state LB is a script that will overlay images using CSS ontop of the current page. Think of it in terms of Photoshop and layers. It is simply layered infront of the page until you click on the image to toggle it away. Very cool! I hope you enjoy it and can find some good use of it too.