The Role of Table Layouts in Responsive Web Design

Fluid layouts are the perfect way to house our content at any viewport size. Text can flow as containers grow and shrink, images and even video and iframes can flex and squish too. But what if we have content which shouldn’t alter dimensions? What about ad blocks, for example, which are often designed with very specific sizing in mind? Oddly enough, this is where table layouts come to the rescue..

I was reminded of this recently when reading Tim Kadlec’s Implementing Responsive Design. It came just at the right time too; I was in the middle of a client project which needed just this approach (and I was busy butchering it).

Ads on the Web

Many websites depend on advertising revenue. However much you may dislike being barraged with web marketing imagery, without it you wouldn’t have access to much of the free content you’ve become used to. Tuts+, for example, relies in part on advertising revenue to maintain its ever-growing team of writers and staff.

The Interactive Advertising Bureau (iab) is responsible for a huge amount of digital advertising and works hard to define standards and guidelines for the whole industry. Take a look at their Display Advertising Guidelines for a reference of the universal ad block sizes they recommend:

Medium Rectangle 300x250px

Rectangle 180x150px

Wide Skyscraper 160x600px

Leaderboard 728x90px

Four fixed dimension images. And it’s important that they remain at those dimensions too; logos, straplines and disclaimers could all become unrecognizable or illegible if squished down in a fluid layout. Also, companies who pay for these ads do so based on the blocks’ size and position. An advert of 300x250px may not be as prominent or effective when displayed at a smaller size, thereby shortchanging the company in question.

Ads are designed for display at a fixed size, so until we have a better solution for responsive advertising, it’s best to respect that.

Fluid Layout

Let’s quickly build ourselves a generic fluid layout to demonstrate our problem. A <section>, containing an <article> and an <aside>. All we need:

<section>
	<aside>
		<!--here's our ad block-->
	</aside>
	<article>
		<!--here's a load of content-->
	</article>
</section>

Then we can style it like so:

section {
	width: 90%;
	margin: 0 auto;
}
aside {
	width: 30%;
	float: left;
}
article {
	width: 65%;
	float: right;
}
img {
	max-width: 100%;
}

With some added color, this is the effect you’ll achieve:

With our img {max-width: 100%} rule we’ve ensured that our images are fluid and never break out from their parent container. Sadly, our fluid aside is narrower here than the image’s 300px width, just what we don’t want to happen.

Hybrid Layout

Let’s fix the width of the aside, leaving the article to do the flexing. As a combination of fixed and fluid, we refer to this layout type as hybrid.

section {
	width: 90%;
	margin: 0 auto;
}
aside {
	width: 300px;
	float: left;
}
article {
	width: 65%;
	float: right;
}
img {
	max-width: 100%;
}

This works on wider screens, but as soon as the container becomes too small, ie: when 300px is more than 35% of the container’s width, the article is pushed underneath:

We can solve this in our case by switching the markup around; placing the aside in the article:

<section>
	<article>
		<aside>
			<!--here's our ad block-->
		</aside>
		<!--here's a load of content-->
	</article>
</section>

Then removing the width and the float from the article, finally giving the aside a margin-right to act as the gutter:

section {
	width: 90%;
	margin: 0 auto;
}
aside {
	width: 300px;
	float: left;
	margin-right: 5%;
}
article {
}
img {
	max-width: 100%;
}

This is what we get:

Which is perfect! The article content is fluid, whereas the ad block and its parent aside are fixed width! You can even shift the aside over to the right, by swapping the float to float: right and placing the gutter (its margin) on the other side too.

Problems arise, however, when the article content begins to take up more vertical space than the aside. This is the result:

There are hacks to avoid this; we could give the aside a massive bottom padding, then an equally massive negative bottom margin. Then with an overflow: hidden we artificially lengthen the aside, hiding whatever sticks out.

Or we could use positioning and fix the aside in the top right of the article, giving the article some padding to make room for it.

Neither of these is ideal, each presenting their own unique issues.

Enter the Table Layout

What?! I hear you say…

That’s right. Table layouts (God rest their souls) were actually pretty good at arranging hybrid layouts, so let’s take a leaf out of their book. Using CSS we can display our elements as though they are components of a table. This is absolutely fine too; we’re not using actual tables in our markup (that would be bad as we’re not working with tabular data). We’re simply going to lean on tables for display purposes, without changing the semantic meaning of our document.

Going back to our original layout (where the aside and the article were side by side) we can alter the CSS to suggest table-like building blocks. Our containing section becomes the table, the article and aside become the table cells within it:

section {
	display: table;
	width: 90%;
	margin: 0 auto;
}
aside {
	display: table-cell;
	width: 300px;
}
article {
	display: table-cell;
}
img {
	max-width: 100%;
}

Which gives us:

Hmm, not quite right. We need to alter the vertical alignment of our cells, because the image and text here are both sitting on the same baseline.

aside {
	display: table-cell;
	vertical-align: top;
	width: 300px;
}
article {
	display: table-cell;
	vertical-align: top;
}

Now, whenever either the article or the aside grow vertically, the other grows with it. The arrangement does depend on the DOM though; whichever table cell element appears first in the document also appears first (to the left) of our table layout.

And of course, we can wrap this all up in a media query too, so that this layout only kicks in on larger screens. On smaller screens the aside will neatly sit on top of the article. Take a look at the demo to see how this behaves.

Support

Using CSS table display is supported in all modern browsers, but was only adopted by Internet Explorer with the release of IE8.

For earlier browsers, therefore, you’d be wise to conditionally include a fallback stylesheet, which gives you an alternative layout solution:

<!--[if lt IE 8]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->

(or you could just ignore IE7 and below…)

As Tim also mentions in his book, Windows 7 phones will also load in the ie.css styles we’ve just set. In order to prevent that from happening, you’ll need to alter the conditions:

<!--[if lt IE 8 & (!IEMobile)]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->

Conclusion

So there we have it – who would have thought table layouts could ever help you out in this age of responsive web design?! Admittedly, this isn’t the perfect solution you may have been wishing for, but until CSS Grid Layout and Flexbox gain a bit more traction, this is a great alternative.

Further Resources

• Windows mobile media queries by Jeremy Keith
• Everything You Know About CSS Is Wrong by Rachel Andrew
• Implementing Responsive Design by Tim Kadlec
• Display Advertising Guidelines