Advertisement
HTML/CSS

The Role of Table Layouts in Responsive Web Design

by

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

Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    Case Studies
    How They Did It: Typekit's New HomepageTypekit retina
    Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
  • Web Design
    HTML/CSS
    A Simple Mixin Alternative to Standard CSS GridsMixin grid retina
    Over the past few years CSS grid systems have become a very popular way of rapidly producing layout scaffolding in web design. They can be a fantastic time-saving resource, with talented coders having intelligently crafted systems which cater to a wide array of possible layouts designers might need to create. However, this isn't the only way to approach grid-based web layouts, and today we're going to examine an alternative.Read More…
  • Web Design
    Email
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…
  • Code
    Creative Coding
    Using Selector-Query for Responsive, Column-Driven LayoutsSelector query 400
    We've all heard about media queries. We've used them extensively in our themes to make them responsive. They're great for most purposes, but when it comes to column-driven layouts, we sometimes need more control to make our designs stand out. In this article, you will learn about the Selector-Query jQuery plugin, and how to use it in your WordPress themes.Read More…