CSS, child-divs y flotante

Question

Estoy cansado de trabajar con este tipo de divs :(.

Tengo 2 divs:

<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 incluye otros 3 divs, que deben permanecer horizontalmente.

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

El problema es que el div inferior no se mantiene referido al contenido de texto. Siempre está en la misma posición, incluso cuando termina el texto de las filas de contenido. ¿Cómo puedo repararlo?

Answer 1

Intente agregar un div después del contenido con el estilo:

clear: both; line-height: 0.1em;

Y pon un

 

en ella

Answer 2

Probar

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

Answer 3

Si desea borrar los flotadores sin agregar marcas adicionales, ponga esto en su CSS:

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