Life the universe and everything

CSS vs Table layout

leave a comment »

<updated>OK. I’m allowed to change my mind aren’t I. Read the updated css div vs table layout post.</updated>

I spent much of the last week looking into CSS layouts with a view to making the leap to pure CSS as opposed to my usual html table layout.

I found many excellent resources and websites offering various solutions. I wanted as much layout control as I have with tables and I wanted to optionally order my columns and write the content in any order on the page. This would enable me to write the main content above the menus etc which reputedly increases relevancy for some search engines.

I found the excellent floatutorial which includes examples of CSS page layouts. The level of control is excellent, however, problems occurred when attempting to write the ‘middle’ content before the menus.

I also stumbled across adaptiveview.com with their 3 Column CSS Layout. Which allows for any order columns and any order of divs on the html page but didn’t give me the control I needed for the page layout. Specifically I wasn’t able to control the appearance of the centre column in relation to the leftmost column. I found it always drifted right due to the float: right; nature of this div. However, I thought the overall concept was excellent and offered a multitude of layout options with a fluid and elastic appearance.

All of the layout options I found needed some form of hack or fix to make them cross browser compatible.

In conclusion, the current lack of standard compliance amongst browsers means an unreliable result when using css to render a table like page layout. I was most disappointed to come to this conclusion as I really felt last week that it is the way forward and wanted to adopt it as my new layout option.

I will use these css layouts on some of my websites but I am not tempted to convert any existing sites to pure css.

Advertisements

Written by barnabyfry

December 3, 2006 at 1:52 pm

Posted in SEO

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: