Liquid contentpane with static right column

Try resizing the window and you will see that this column will change size accordingly to the window whilst the right column keeps the same size. This is very usefull for "liquid" layouts where the main content primarly consists of text while the right column consists of more "fixed size content" such as banners, images, tables, etc.

With this technique the primary content comes before the secondary content (the right col) in the html which is an advantage for people with screenreaders because the primary content is read first, so no need for skip-links etc.

Advantages

Good for book-like webpages where users needs to read alot of text.
Clean code, no javascript or other "hacks" required.

Disadvantages

Hard to make content pretty for all resolutions when having rich content on the page. Floating elements in primary content should be avoided.

Recommended extensions

A maximum width of the primary content is recommended since some screens are extremly wide which makes it hard for such users to read the content in fullscreen. I leave this up to you to implement since it's a matter of taste what this maximum is.

Tested with:

Browser	Version	Problems
Firefox	3.5	-
Firefox	3	-
	2	-
Internet Explorer	8	-
Internet Explorer	7	Requires specific css
	6	Requires specific css
Chrome	2	-
Opera		-
Safari	(Win32) 3.2.2	-

Sample html code

<head>
	<!-- Place IE specific CSS in the file refered to below -->
	<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
</head>
<body>
<div id="wrapper">
	<div id="contentpane">
		<!-- content goes here -->
	</div>

	<div id="rightcol">
		<!-- secondairy content goes here -->
	</div>
</div>	
</body>

Css code

#wrapper {
	overflow: auto;	
	
	/* right col fixed width, left extremly wide */
	background-image: url('background.gif'); 
	background-position: top right;	
		
	/* depending on your content set this to the smallest 
	   size your contentpane can be without distortion. 
	   With my padding this limits the website to a minimum 
	   of 800x600 (or 800 x *) resolution. */		
	min-width: 700px; 	
	padding-bottom: 1em;
}
#contentpane, #rightcol {
	padding: 0.5em 1em;
}
#contentpane {
	float: left;
	
	/* width of right col (plus padding) */
	margin-right: 22em;
}
#rightcol {
	float: right;
	width: 19em;
	
	/* width of right col (plus padding) */
	margin-left: -22em;
}

IE6 and IE7 Specific Css

#rightcol {
		
	/* misscalculation by IE6 and IE7 */
	margin-left: -21em;
}
#wrapper {

	/* buggsolved for IE6 */
	zoom: 1; 
}

That's all folks! If you've like to comment on this tutorial i suggest you comment via your twitter account and I'll check 'em there!

My twitter nick is ozzLe (aka OZZIE), so put @ozzle in your tweet and a #liquid_static would be great!

Best regards, Oskar Mothander 2009, updated 2010