Skip to content

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

Robert Greiner
Robert Greiner

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.

Please consider subscribing, it's free.

Robert Greiner Twitter

Professional optimist. I write a weekly newsletter for humans at the intersection of business, technology, leadership, and career growth.