CSS Div vs Table Layout

OK. I’m going to eat humble pie. I have just migrated my main website to XHTML and Div based CSS layout with hardly a table in sight.

As I stated in my previous post I wanted to find a CSS solution which gave me the flexibility of tables using Divs. I stubbornly continued in this quest and came across Yahoo’s developer network grids: http://developer.yahoo.com/yui/grids/

I found that their template layouts were very similar to my existing layout and offered the opportunity to seamlessly migrate my site quickly with only minor tweaking of the CSS required.

I am very pleased with the result but will have to wait and see if the search engines approve.

Having migrated to Div/CSS based layout I decided to update my HTML to XHTML, a much cleaner markup language. With a very helpful tutorial from w3schools.com I proceeded to clean-up my code.

Although a bit laborious I was delighted to see the pages validating.

So, in conclusion … I DO think that CSS based design is the way forward and I am now a convert. My pages are smaller (around 20% smaller), the content is near the top of the markup (good for SEO as well as for software web readers) and I now find myself with a more flexible website because it is CSS based. I could even give users the option of where they want the menu at the click of a link. I won’t, but I could.

Some people will find their page sizes reduce more or less dependant on the use of tables. For example I had already reduced my page sizes by adopting <ul><li> instead of repeated <tr><td>’s for menus etc.

CSS vs Table layout

<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.