Creating a Fluid Two-Column Layout With a Single Fixed Width Column

Introduction

Posted by

Robert Greiner on March 13th, 2010

Ever wonder if you can create a fluid layout with a fixed witdh column? Well, you can!

layout.html

<html>
  <head>
    <title>Fixed Left Column</title>
    <link rel="stylesheet" href="test.css" type="text/css" />
  </head>
  <body>
    <div>Left div</div>
    <div>Right div</div>
  </body>
</html>

test.css

.left {
	width: 300px;
	float: left;
	background-color: #CCCCCC;
}
.right {
	margin-left: 300px;
}

There are very few times in life that you can have things both ways, this is one of them.

Creating a Fluid Two-Column Layout With a Single Fixed Width Column

layout.html

test.css

Robert Greiner

Iterating Through a Dictionary in C#

Creating Algorithmic Art Using Processing

Subscribe for free