Question

I’m looking for a way to create a CSS layout where the left column is fluid and the right column is fixed using the exact markup below. I don’t think it is possible. Am I wrong?

<div class="wrapper">
  <div class="left">Fluid Column</div>
  <div class="right">Fixed Column</div>
</div>

Answer 1

Yep. Try this:

<div id="wrapper">
    <div id="left">
        <div id="content">
            ...
        </div>
    </div>
    <div id="right">
        ...
    </div>
</div>

CSS:

#wrapper { width: 900px; }
#left { float: left; width: 100%; margin: 0 -100px 0 0 ; }
#content { margin: 0 100px 0 0; }
#right { float: right; width: 100px; }

Note: Remove wrapper if you want the width to be 100%.