Flexible fluid layouts with CSS and jQuery (Part 2 in series)

2012 Update: This techniques outlined here have been mostly outdated by CSS3 Media Queries, which I recommend using instead.

This is a follow-up to last week’s post, Should we design for wider screens?. In this post I’ll demonstrate with a simple example how easy it is, with CSS and a bit of jQuery, to make layouts that adapt to the many different screen sizes out there.

Example HTML

At the top level, my example HTML page has a #wrapper div, which contains a #header, #main div containing all the interesting stuff, and a #footer. The main section has #content, #primary, #secondary and #tertiary divs for the different content areas of my page. The first two content areas, #content and #primary are wrapped up in an additional #container div, but your own markup may obviously differ.


<body class="normal>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="container">
<div id="content"></div>
<div id="primary"></div>
</div>
<div id="secondary"></div>
<div id="tertiary"></div>
</div><!– #main –>
<div id="footer"></div>
</div><!– #wrapper –>
</body>

Prepare your styles

The basic idea here is to have different CSS styles for each width. The styles could be changed directly through jQuery, but that would quickly result in a lot of messy code. Instead, we’ll use jQuery only to change one class attribute. Initially I’ve added the class ‘normal’ to the body element to ensure a sensible default for browsers with JavaScript disabled, but we’ll also need styles for ‘wide’, ‘slim’ and ‘narrow’. This is easy to do with CSS descendant selectors:


#wrapper { margin: 0 auto; }
#header {overflow: hidden;}
#container,#content,#primary,#secondary,#tertiary
{float:left;}
#footer {clear:left;width:100%;}
/* Wide ( over 1100px ) */
.wide #container {width:60%;}
.wide #content {width:66%;}
.wide #primary {width:34%;}
.wide #secondary,.wide #tertiary {width:20%;}
/* Normal ( over 800px ) */
.normal #container {width:50%;}
.normal #secondary,.normal #tertiary {width:25%;}
/* Slim ( over 600px ) */
.slim #container{width:66%;}
.slim #secondary,.slim #tertiary {width:34%;}
/* Narrow ( under 600px ) */
.narrow #secondary,.narrow #tertiary {width:50%;}
.narrow #secondary {clear:both;}

Unfortunately versions 7 and older of Internet Explorer deal differently with percentage widths compared to most other browsers, and can result in some funny behaviour. I see two primary ways to deal with it: either feed IE 6 and 7 it’s own rules (e.g. a tested, fixed-width layout) or just make sure that the percentages never add up to 100 %. A nice explanation of this annoying feature can be found over at OJTech.com.

The jQuery

First of all I need to include jQuery, and perhaps the easiest way is to use Google’s jQuery for this. The main bit is a function, checkWidth() that (you guessed it) checks the width of the browser window and sets the body class attribute accordingly. The code below should be pretty self-explanatory.


function checkWidth () {
if ($(window).width() > 1400) {
$('body').attr('class','superwide');
$('#title').text('Wide ('+$(window).width()+')');
}
else if ($(window).width() > 1100) {
$('body').attr('class','wide');
$('#title').text('Wide ('+$(window).width()+')');
}
else if ($(window).width() > 800) {
$('body').attr('class','normal');
$('#title').text('Normal ('+$(window).width()+')');
}
else if ($(window).width() > 600) {
$('body').attr('class','slim');
$('#title').text('Slim ('+$(window).width()+')');
}
else {
$('body').attr('class','narrow');
$('#title').text('Narrow ('+$(window).width()+')');
}
}

In addition to this, all I need is some code that will tell the browser when to run the checkWidth() function.


$(document).ready(function(){
// check the window size when page loads
checkWidth();
// check on resize
$(window).resize(function() {
checkWidth();
});
});

That’s it! View the finished demo EDIT: I’ve managed to lose the demo at some point in time. Anyway a better and more flexible way of doing this is CSS3 Media Queries, and you should use them.

After starting to write this post, I read the latest issue (#200) of .net magazine and noticed a mention of a very cool way to do a similar trick using only CSS media queries! Media Query demo by Bruce Lawson. Haven’t tried it out yet, but I definitely will.

Hope you liked the post, feel free to tweet it, or leave a comment below.

One response to “Flexible fluid layouts with CSS and jQuery (Part 2 in series)”

  1. I have learn several excellent stuff here. Certainly price bookmarking for revisiting.
    I surprise how so much attempt you set to create one of these great informative site.

    Like

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 )

Connecting to %s

%d bloggers like this: