float left element with unknown height

by evpozdniakov

HTML

<div class="box clearfix">
    <div class="image"></div>
    <div class="description"></div>
</div>

CSS

body {
    padding: 20px;
}

.box {
    padding: 10px;
    width: 430px;
    border: 2px solid #ccc;
}

.image {
    float: left;
    width: 200px;
    height: 300px;
    border: 1px solid #0f0;
    background: #efe;
}

.description {
    float: left;
    margin-left: 10px;
    width: 200px;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JavaScript

$(function(){
    var descriptions = [
        'Vt ferme religiosis viantium moris est, cum aliqui lucus aut aliqui locus sanctus in via oblatus est, votum postulare, pomum adponere, paulisper adsidere: ita mihi ingresso sanctissimam istam civitatem, quamquam oppido festinem, praefanda venia et habenda oratio et inhibenda properatio est. Neque enim iustius religiosam moram viatori obiecerit aut ara floribus redimita aut spelunca frondibus inumbrata aut quercus cornibus onerata aut fagus pellibus coronata, vel enim colliculus saepimine consecratus vel truncus dolamine effigiatus vel cespes libamine umigatus vel lapis unguine delibutus. Parva haec quippe et quamquam paucis percontantibus adorata, tamen ignorantibus transcursa.',
        'Non enim mihi philosophia id genus orationem largita est, ut natura quibusdam avibus brevem et temporarium cantum commodavit, hirundinibus matutinum, cicadis meridianum, noctuis serum, ululis vespertinum, bubonibus nocturnum, gallis antelucanum; quippe haec animalia inter se vario tempore et vario modo occinunt et occipiunt carmine, scilicet galli expergifico, bubones gemulo, ululae querulo, noctuae intorto, cicadae obstrepero, hirundines perarguto. Sed enim philosophi ratio et oratio tempore iugis est et auditu venerabilis et intellectu utilis et modo omnicana.',
        'Nam superioribus capitibus dignitas populi Romani violabatur, nomen imperi in commune odium orbis terrae vocabatur, urbes pacatae, agri sociorum, regum status xviris donabantur; nunc praesens pecunia, certa, numerata quaeritur.'
    ];
    var randomDescription = descriptions[Math.floor(Math.random() * descriptions.length)];
    $('.description').html(randomDescription);
})