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

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

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.

Robert Greiner
Author

Robert Greiner

Professional optimist. Passionate about cultivating high-performing teams @ scale by integrating the timeless wisdom of the past with the marvel of today's emergent technology in a practical way.

View Comments
Next Post

Iterating Through a Dictionary in C#

Previous Post

Creating Algorithmic Art Using Processing

Subscribe for free

Subscribe to my newsletter and get the latest posts delivered right to your inbox for free. I don't spam and your email won't be shared with third-parties.

Thanks for subscribing!

Check your inbox to confirm your subscription.

Please enter a valid email address!