Css, child-div e floating

Question

Sono stanco di lavorare con questo tipo di div :(.

Ho 2 div:

<div id="content">
  <div id="row_left"></div>
  <div id="row_middle"></div>
  <div id="row_right"></div>
</div>
<div id="bottom"></div>

css:

#content {
  overflow: hidden; width: 100%;
}

Content-div include altre 3 div, che dovrebbero rimanere in orizzontale.

#row_left, #row_middle, #row_rifht { float: left; width: 33%; }

Il problema è che il div inferiore non rimane riferito al contenuto-testo. È sempre nella stessa posizione, anche quando il testo delle righe di contenuto è finito. Come posso ripararlo?

Answer 1

Prova ad aggiungere un div dopo il contenuto con lo stile:

clear: both; line-height: 0.1em;

E metti un

 

in esso

Answer 2

Prova

...
<div id="bottom" style='clear:both'></div>

Answer 3

Se desideri cancellare i float senza aggiungere markup extra, inseriscilo nel tuo CSS:

#content { zoom: 1; }
#content:after {
    clear: both;
    display: block;
    content: ".";
    height: 0;
    visibility: hidden;
}