CSS Two Column Fluid Layout – Static Column With Elastic Fluid Column

Overview

Are you looking for some quick HTML code to create a two column table with one static column and an elastic or fluid column. It took me a while to figure out, especially since css is one of my weaker languages. So I have placed the code here to hopefully make your life easier when it comes to creating html static and liquid column layouts.
There are only two parts to achieve this and what you will find after creating the two pages (one css file and an html file) is a page that has a static right hand column of around 400px and a elastic, liquid left column (or main content) that will stretch to fit the width of the browser as you resize the window.

CSS Two Column Fluid Layout

Below is the css code used to create the two column table. The important part to take notice of is wrapper which has a 400px padding to the right. This allows the fixed right hand column to fit snug next to it without the right column dropping down below. Copy the below code into a separate css file (I named mine elastic.css) or include it inline in the same HTML file where the html code will be.
As you will see, there are some optional css parameters which are commented out. They are more for styling rather than being required. Use as needed.

body {
	font: 16px/24px Georgia, serif;
	color: #5A5A5A;
	margin: 0;
}

header, footer {
	/*padding: 30px 20px;  optional: add some padding to match the margins of the #wrapper */
	background: #555; /* optional: background colour */
	color: #F0F0F0;
}

#wrapper {
	padding-right: 400px; /* padding should be the total width of all right columns */
	/*margin: 0 20px;  optional: spacing to the side of our content and sidebars */
}

#content {
	float: left;
	width: 100%;
	min-width: 600px;
}

.sidebar {
	float: left;
	width: 400px;
	margin-right: -1000px;
	/*background: #DDD;  optional: background colour */
}

.sidebar .side-column {
	width: 200px;
	float: left;
	/*margin-left: 20px;  optional: add a small space between the columns as well as the content to the left */
}

footer {
	clear: left; /* clear the floating from the above content and sidebar this makes the footer appear correctly below */
}

HTML Code

Create your html file and paste the following code into it. If you decided to include the above css inline, then you will need to paste the above css code into the html code below.

<!DOCTYPE html>
<html>
<head>

<title></title>
<link rel="stylesheet" type="text/css" media="all" href="elastic.css" />

</head>
<body>
	<header><strong>Our Header</strong></header>
	<div id="wrapper">
		<div id="content">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor interdum elit faucibus scelerisque. Curabitur eleifend orci eget ante egestas viverra ac nec mauris. Pellentesque et dolor et leo pellentesque sollicitudin vitae vel velit. Phasellus ullamcorper sapien in sapien fermentum viverra. Sed dignissim est nec risus elementum molestie. Morbi placerat pharetra massa vitae aliquam. Curabitur laoreet suscipit leo, sit amet lacinia dolor placerat eu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Nulla lacinia, ante ac dignissim viverra, nunc orci rhoncus odio, porttitor aliquet orci massa non lorem.
		</div>
		<div class="sidebar">
			<div class="side-column">
				Sed ornare sollicitudin nisi, in tristique quam laoreet non. Nullam semper, turpis et pulvinar pulvinar, quam dui consequat mi, ac aliquet arcu nunc id massa. Vivamus aliquam odio eget neque auctor tempus sollicitudin dui malesuada. Suspendisse tincidunt eleifend pellentesque.
			</div>
			<div class="side-column">
				Phasellus arcu nulla, pulvinar et cursus id, venenatis ac augue. Sed vitae erat in ante tristique cursus at non ante. Ut auctor metus at neque consectetur pulvinar. Morbi et mauris odio. Nulla viverra vulputate leo, vitae porta augue aliquam ac. Praesent ut nisi velit.
			</div>
		</div>
	</div>
	<footer><strong>Our footer</strong></footer>

</body>
</html>

After having created your two files, a css file and a html file, you can open the html file to see the result. You will notice that there are two columns in the html file, one being static/fixed width to the right hand side and the main content being liquid and is resized as the browser window is resized. It is a great way to make the most of your web browser window space and is rather simple to use (once you have the code samples).