Here is an example that I have previously worked on and would like to share. It involves using positioning, specifically in a fixed-fluid scenario:
+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+
Alternatively,
+-------+-----------+
| FIXED | FLUUUUUID |
| | FLUUUUUID |
+-------+-----------+
This is known as the Fixed-Fluid Model. I have demonstrated two examples in my snippet - one with a smaller fluid size, and the other with long content.
Snippet
.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid</div>
</div>
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>
To showcase a better fixed-fluid layout, here's another example for you:
.main-content {border: 1px solid #999; padding: 5px; position: relative; min-height: 200px; padding-left: 125px;}
.left-sidebar {position: absolute; left: 0; top: 0px; width: 120px; background-color: #eee; height: 100%;}
<div class="main-content">
<div class="left-sidebar"></div>
<div class="right-fluid">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum libero iure facere quam iste, nostrum laborum in, dolorum beatae optio rem explicabo voluptates qui quos eius accusamus! Accusamus blanditiis, et!
</div>
</div>