New DIV-only layout in ThemeFrame

If you’re in a hurry, here’s the gist of it:

ThemeFrame was using the proven Atahualpa layout technique which uses a table for layout. NOW ThemeFrame uses a DIV-only layout for all current browsers and search engines while still serving a table layout to IE6 and IE7 users. This leads to table-like stability without actually using tables. This is a more feature-rich and also more robust layout technique than the typical approach with floated DIV’s.

The longer version is this:

What really constitutes a “layout” in web design is to “put pieces of HTML content side by side“. If you don’t need layout parts to be arranged “side by side” then you won’t need any kind of “layout technique” either: You would simply place your content on a HTML page as one huge list, from top to bottom, with one piece of content placed after another. No DIV’s, tables or anything like that would be needed.

This is not a realistic scenario though, because most of the time you DO want to put things side by side. This is where the various HTML/CSS layout techniques come into play.

The layout technique that is probably considered as the most modern, elegant and appropriate among web developers is to “float” DIV’s to the left, by setting their CSS property “float” to the value “left”.

.my-columns { float: left; }

By doing it this way, layout parts are indeed placed side by side, and that’s what we wanted, right? This is the approach that mostly replaced the “old-fashioned” way of arranging layout parts side by side with the use of HTML tables. Soon enough this new “DIV-only” layout technique was established as the proper one among developers.

Typically this is called “CSS-only” layout but I call it “DIV-only” layout, because “CSS-only” implies that tables are not part of CSS whereas DIV’s are – which is unjust against the poor, old table, because in fact there are dozens of CSS properties specifically for tables.

So, tables quickly got a bad reputation, and developers using tables for layout were often considered as not being on top of the game anymore. I’ve even seen blog comments complaining about the usage of a table for displaying tabular data inside a blog post. Soon enough someone’s going to question the usage of tables inside databases. The rigor with which the usage of tables is being criticised stands in huge contrast to both the perceived merits of DIV-only and the perceived drawbacks of tables.

The problem with floated DIV’s is that due to the way CSS was designed these floated DIV’s that you consider to belong together and that you want to “stay together” aren’t connected to each other at all. They do not “know” of each other. All the floated DIV’s are independent from each other, just like all DIV’s are, although – visually as well as conceptually – they DO belong together and you want them to stay together.

In other words: one column doesn’t know what the column next to it looks like and what it is doing, how tall it is or whether it needs more horizontal space than initially planned by the designer because of – for instance – an oversized (wider than the column) image was placed inside it.

Compare this “Floated DIV” approach with its independent containers (the floated DIV’s) to how neighbor columns behave in a table. In a table, the columns are tied together like concrete and there’s no way for one of the columns to go wandering around to another location inside the layout. A table is clearly more robust in this regard.

So why not use tables anymore when they are more robust, what are the drawbacks of using tables for HTML layout? Well, first off, tables still play a great role as a means to create layout on the web right now. Google for “www” or “http” or look up Alexa or something for a list of the biggest websites out there. Then go through each one, view their source code, and you’ll notice that the majority of big websites (incl. Google, Wikipedia…) are in fact using: tables for layout.

Note: If there’s no table on the homepage, check out one of the subpages (i.e. on wikipedia) because some sites use tables not on the homepage but do so on subpages. The reason is that the subpages are dynamic and need more robustness whereas the homepage has more or less fixed dimensions.

When I created Atahualpa, the market share of IE6 was very high and the “DIV-only” technique lacks stability specifically in IE6 and with flexible-width layouts. In a flexible-width layout, the right sidebar will drop all the way down to the bottom left of the page, if any content in any of the columns is wider than its parent column – according to IE6’s width measurement. The tricky thing is that in newer browsers everything will keep looking fine. I looked for a way around this and found it in using a table, but with a twist.

One REAL disadvantage (contrary to perceived drawbacks like tables not being “meant” for layout) is the fact that in its regular state a table will not obey to any width settings. A standard table will always allow its children (the content inside the columns) to extend itself. The table will not shrink oversized content, break overly long strings, overflow content or create local vertical scollbars, it will just extend and then main vertical scrollbars will appear at the bottom of the browser viewport.

I was able to handle this by setting the layout table’s CSS property “table-layout” to “fixed”. Now the table obeyed to width settings and acted like a DIV in this regard, while still providing the stability and extra features only a table can provide: Easy, non-hackish full height columns, easy vertical centering, an awesome column width algorithm, no dropping of any column ever.

This did however not rectify the negative image that table layouts have. Some reasons against using tables for layouts may be silly, such as the one that tables were not “meant” for layout (like teflon wasn’t meant for frying pans) and most big sites might indeed be using tables. But regardless of all that there is still the fact that in about 10 million or so blog posts and comments people keep bashing tables.

What if you made a theme for a client, and the 10 year old “cousin of a friend of the son” of the client told him that what he got from you is not up to modern standards because tables were being used, and tables are not to be used as “everyone knows”? If the client searched the web for this issue it would seem that tables are bad indeed and you wouldn’t want to have to explain to him that in reality tables aren’t that bad at all, and that floated DIV’s aren’t that good either. If a ton of people claim something it becomes true, a self-fulfilling prophecy.

I am aware that being technically good isn’t enough, it also needs to “feel” good and be in compliance with what the majority thinks, even if their reasoning may not always be rational. I searched for a way around this, found it in the CSS property “display”, and now ThemeFrame creates themes with a DIV-only layout.

To be more precise, the layout consists of DIV’s that behave like table cells and have all their advantages, without actually being table cells. This is achieved by setting the column DIV’s to “display:table-cell”. This technique does not work in IE6/7 so these two browser keep getting served a table layout while all current browsers plus the search engines (!) get a true DIV-only layout.

Ain’t this the best of two worlds? The stability of a table, but without an actual table and the extra code and – more importantly – without the bad image that comes with using tables.

One nice thing about this technique is that both the tables (for IE6 and IE7) and the layout DIV’s (for search engines and modern browsers) are using the SAME CSS, same CSS properties and same CSS values.

PRO’s of ┬áDIV’s with display:table-cell:

  • Full height columns. (with floated DIV’s, this requires some nasty CSS hacks)
  • No dropping sidebars in IE6. No dropping anything ever.
  • Powerful column-width algorithm: Mix and match PX and % values, undefined columns share remaining width equally. If you don’t define any colum width, the columns adjust their width according to their content. Columns with more content get a wider column – perfect.

PRO’s of floated DIV’s:

  • “Source ordering”. Putting the HTML code of the main content above the HTML code of the left sidebar. This needs to be configured with negative margins (it doesn’t happen automatically just because you use floated DIV’s). If you have no left sidebar, then there’s no advantage here compared to DIV’s with display:table-cell. Please google “source ordering” to see whether source ordering is worth it for search engine optimization purposes and whether it interferes with usability, screen readers etc…
  • Individual margins for columns possible. Often you want the margin for all columns to be the same though…

I have nothing against floated DIV’s, just like I have no personal feelings against and pro tables and/or DIV’s with display:table-cell. They both have ┬átheir PRO’s and CON’s but overall I think DIV’s with display:table-cell have an advantage especially when it comes to stability, flexible width layouts and handling of oversized content like huge images that don’t fit into the column.

Floated DIV’s have the source ordering going for them but the question is whether it is worth to give up the DIV/table-cell’s advantages for that. And, the source ordering advantage (if it is one) only applies if you DO have a left sidebar. If your sidebar(s) is/are on the right, then the source code of both techniques look about the same.

ThemeFrame will get floated DIV’s as a second layout option soon. So you can choose between these two techniques.

3

comments to ...
New DIV-only layout in ThemeFrame

  • Flynn – as a longtime Atahualpa user (I learned WP on it), it was good to finally read your “tables” rationale. It wasn’t until after I completed my site that I began to realize how large the *anti-tables movement* was. At first I was worried that I’d just wasted countless hours on something that was outdated / didn’t comply with standards. But as I weeded through the trash talk and baseless claims, I had a hard time finding solid evidence for why divs are so much better than tables. So I’d have to agree with your “self-fulfilling prophecy” theory.

    Thanks for all your contributions to WordPress over the years, and best of luck with ThemeFrame.

  • Thanks, Tom

  • I agree! Tables aren’t always bad, and people who use them don’t deserve to be perceived as less-skilled. Thanks for your great work!

Leave a Reply to Tom Cancel Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>