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 building exceptional teams that do cool things together. I mobilize teams to deliver strategic technical solutions that help businesses succeed.

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!