Micro Clearfix

by kaikemono

HTML

<div class="content clearfix">
    
    <div><img src="http://placekitten.com/g/200/400" /></div>
    <div>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        
    </div>
    
</div>

<p>
    Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.
</p>

CSS

.content {
    background-color: #f2f4f7;
    margin: 0 0 1em;
}

.content > div {
    float: left;
    margin: 1em;
}

.content > div:last-child {
    width: 50%;
}


/* micro clearfix: http://nicolasgallagher.com/micro-clearfix-hack/ */
/* for modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* for IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}