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…

Book a FREE Consultation Today

Pick a day & time in the calendar that suits you for a 30 minute phone, video or in-person* meeting to run through your needs and explore options.

Please include a brief summary of your request along with any existing links, etc.

* In-person visits available in the Isle of Purbeck, Dorset and surrounding areas only