He encontrado bastante fastidioso el hacer DIVs flotantes para, por ejemplo, el contenido y la barra de herramientas (para los entendidos “SIDEBAR”). El problema radicaba en que, sabrá dios el porqué, a veces el SIDEBAR quedaba abajo, como si no tuviese la propiedad Float.
Aun mas raro, es que me pasaba solo con mi amado Firefox, y no siempre. A veces aparecía de esta forma, y al hacer F5 (lease refresh o actualizar) se acomodaba, por lo que no pude evitar exclamar WTF?!.

Probé algunas soluciones no convencionales como por ejemplo, usar tablas (puaj!). Si bien se arreglo, estamos en la era del CSS, por lo tanto la tabla debía desaparecer.
Después de quemarme algunas neuronas encontré algo que le dio un fin a esta epopeya:
la propiedad CLEAR: BOTH.

Veamos que dice don GOOGLE al respecto:

Float
El estilo “float” sirve para alinear un elemento, haciendo que el texto de alrededor del mismo se agrupe entorno a dicho elemento. Sus posibles valores son “left” (para alinear el elemento a la izquierda) y “right” (para alinearlo a la derecha).Un elemento con “float” debe tener definida su anchura. De no ser así, no será tratado como tal y el estilo no se aplicará.

Clear
El estilo “clear” se utiliza conjuntamente con float. Utilizamos este estilo cuándo queremos que elementos que tienen cerca un elemento flotante (mediante “float”) dejen de alinearse junto a él.
Sus posibles valores son left (el elemento no permite flotantes a su izquierda ), right (el elemento no permite flotantes a su derecha ) o both (el elemento no permite flotantes a ningún lado).

En resumen, y con ejemplos claros:

XHTML:

1
2
3
4

<div> <!-- float container -->
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>

CSS:

Primer DIV alineado a la izquierda:

2
3
4
5
6

#div1{
     float:left;
     //un  fondo diferente para diferenciarlos uno de otro
     background: green;
}

Segundo DIV alineado a la derecha:

3
4
5
6
7

#div2{
     float:left;
     //un fondo diferente para diferenciarlos uno de otro
     background: red;
}

y tendríamos entonces algo así:

Entonces agregamos nuestro salvador:

XHTML:

4
5
6
7
8

<div> <!-- float container -->
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="divClear"></div>
</div>

CSS:

5
6
7
8

#divClear {
     clear: both;
     background: yellow;
}

lo que nos daría algo así:

Y con esto evitaríamos que se nos “aloquen” los DIVs flotantes.

Un interesante articulo sobre esto y muchos errores comunes y como solucionarlos podes encontrarlos en este post de Smashing Magazine:

CSS Float Theory: Things you should know
(CSS Teoria Flotante: Cosas que deberias saber)

http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Espero les sirva. Si alguien le encuentra otra solución que avise y la posteo.