Responsive Fixed-Fluid Layout

The Problem

Build a two-column responsive page that had a fixed-width right column. It actually sounds easier than you think. That fixed-width right column throws a wrench into everything.

For this example, let’s go with a fluid left column and a 320px wide right column.

HTML

<div class="main">
<div class="leftwrapper">
<div class="left">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit dolor, congue vitae turpis in, blandit dictum magna. Praesent sollicitudin dictum libero. Aliquam tempor elit quis metus egestas, vel adipiscing nibh pulvinar. Aenean quis venenatis massa, at interdum est. Praesent iaculis mi lacus, quis auctor purus placerat vel. Cras sed commodo velit. Aenean ac aliquam purus, vitae rhoncus justo. Proin mollis facilisis sapien, id consequat purus imperdiet eu. Donec posuere, arcu a facilisis ultrices, nibh nisi convallis ante, et sollicitudin metus ante vel felis. Curabitur sagittis, dolor malesuada adipiscing pulvinar, velit risus elementum augue, non tempor lectus mi sit amet ipsum. Aliquam mollis semper ultrices. Sed eleifend tempus dui nec venenatis. Maecenas faucibus turpis leo, nec facilisis sapien mattis non. Donec in elit vitae enim interdum auctor nec id dui. Vivamus sed odio diam. Cras pretium dolor ac neque iaculis eleifend.

</div>
</div>
<div class="right">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit dolor, congue vitae turpis in, blandit dictum magna. Praesent sollicitudin dictum libero. Aliquam tempor elit quis metus egestas, vel adipiscing nibh pulvinar. Aenean quis venenatis massa, at interdum est. Praesent iaculis mi lacus, quis auctor purus placerat vel. Cras sed commodo velit. Aenean ac aliquam purus, vitae rhoncus justo.

</div>
</div>

The Solution

Don’t worry, it’s not even crazy “RWD math” that you have to deal with. What you’ll need to do is use em’s… and *gasp* negative margins.

CSS

.leftwrapper {
float:left;
margin-right:21.25em; /* 340px - to allow for a 20px gutter */
}
.right {
float:right;
margin-left:-100%;
width:20em; /* 320px */
}

Aaaand because I hate when sites don’t provide a demo page, here you go:

Notes:

Apparently, this doesn’t work too well if you have large images in the left column. Example would be an image you expect to fill the width of the column. However, without a width set, the image will break the layout