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

Daniel — Fri, 02 Apr 2010 08:39:21 +0000

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.
If you’re feeling impatient, jump straight to the demo!

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.


	 ... 
	
		
			 ... 
			 ...  
		
		 ... 
		 ... 
	

 
	 ...

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.

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.
Original post: Flexible fluid layouts with CSS and jQuery (Part 2 in series)

Daniel Koskinen » jquery

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

Example HTML

Prepare your styles

The jQuery