CSS Tricks : Perfect Liquid Layout with Fixed Width Right Column

Doing a fixed width left column is easy, but doing a fixed width right column in a liquid layout is a bit tricky.

We need to use a container div and give that div negative margin, then give the left column div the same amount of positive margin to get it to display right. Our example also takes into account we want padding in each column along with spacing between them.

.left-column {
	width: 100%;
	float: left;
	padding: 10px;
	margin-right: -310px; /* The size of the fixed width column + space between them.
				+ sum of padding used in both columns. 
				IMPORTANT! use negative margin here. */
	min-height: 100px;
	text-align: center;
	border: solid 1px red;
}
.left-column-cont {
	margin-right: 310px; /* The size of the fixed width column + space between them 
				+ sum of padding used in both columns. */
}
.right-column {
	float: right;
	padding: 10px;
	width: 250px; /* The size of the fixed width column */
	border: solid 1px red;
	min-height: 100px;
	text-align: center;
	border: solid 1px red;
}
.clear {
	clear: both;	
}

<div class="left-column-cont">
	<div class="left-column">Liquid Column</div>
</div>
<div class="right-column">Fixed Column</div>
<div class="clear"></div>

Result:

Mouse-over below to see the liquid column in action!

Be sure to increase the margin values in .left-column and .left-column-cont with any padding you add to either of the columns and add in the desired spacing between the columns.

In our example, we give 10px of padding to both columns (padding occurs 4 times on left and right of both columns.) and we want 20px space between them.
Our margin value is calculated as follows: 250px + 20px + (10px x 4) = 310px.

The liquid column will always size correctly to the parent's element width. If using a fixed width layout, you don't need to go to this extreme to get perfect columns. However, if using a liquid layout such as in a responsive design, this is the way to do it.