will's dilemma

by brico

HTML

<div class="widget-special">
<div class="sep topcontainer">
    <img src="http://static.musiciansfriend.com/derivates/18/001/388/781/DV016_Jpg_Large_423507.854_white_blonde.jpg" class="thumb" />
    <table class="table-simple">
        <caption>Fancy junk</caption>
        <tr>
            <td>left</td>
            <td>right</td>
        </tr>
        <tr>
            <td>left</td>
            <td>right</td>
        </tr>
    </table>
</div>

    <form class="form-horiz sep">
        <label class="whatev">Thing</label>
        <input class="button" type="submit" />
        <input class="zip" />
        <div class="awesome-clearfix-solution" style="clear: both;"></div>

    </form>
</div>

CSS

/* atoms in the top half */
.thumb { width: 100px; border: 1px solid silver; }

.table-simple { border: 3px solid yellow;  width: 100%; margin: 10px 0;}

/* layout/container/context whatever you call, for top half */
.topcontainer .thumb { position: absolute; left: 0px;}
.topcontainer { position: relative; padding-left: 105px;  }

/* atoms in the bottom */
.zip, .button, .whatev { margin: 10px 0; }

/* context for bottom group */
.form-horiz .whatev { float: left; }
.form-horiz .zip, .form-horiz .button { float: right; }

/* 'helper' atom/container thing */
.sep + .sep { border-top: 1px dotted red;}

/* parent of everything, not really doing much */
.widget-special { border: 2px blue solid; padding: 0 10px; }