Obtékání float

Klasický problém při použití float uvnitř neplovoucího prvku je, že jej obteče. viz následující ukázka:

[sourcecode language=“css“]div.box {border: 1px solid red;}
div.left {float: left; width: 30%; }
div.right {float: right; width: 60%;}[/sourcecode]

Problém je ukázán zde: http://tinkerbin.com/nUdXjaJF
Původním řešení bylo použití dalšího prvku, které obtékání zruší. Například @pixy na svém původním blogu ukazoval použití prvku hr.cistic
Novější řešení nepoužívá další prvek, ale vystačí si pouze s doplněním kódu do rodičovského prvku. Schválně si zkuste do div#box přidat: overflow: auto; width: 100%;