Floated Variable Width Columns

So the problem started when I needed two columns, one with text, the other with an image. Easy enough you might think but that image needed to be easily swapped for another image which may be larger or smaller.

So in this example I’ve used paragraphs to demonstrate the effect. You could probably add a min-width to make it a little more robust but these are the basics.

HTML

<div>
    <div class="right"> 
        <p />Notice how the right div goes first?  (And this text is simply here to help fill up the space a little bit more...) 
    </div>
    <div class="left">
         <p />And the left div second... (And this text is simply here to help fill up the space a little bit more...) 
    </div>
</div>

css

div { margin:5px 0; padding:0 0 10px; text-align:left; }
div:after { content: "."; clear:both; height: 0; visibility:hidden; display:block; }
div .left { float:none; margin:0 0 10px 0; overflow:auto; }
div .left p, div .right p { width:auto; overflow:auto; }
div .right { float:right; margin:0 5px 10px; }

Edit: I’ll actually get a demo working at some point in a demos section. That’ll stop any clearing fixes borking my pages.

So we came up with this. In retrospect, there should be a simpler way to go about this but here’s what we have…