CSS-ESTRUCTURA

Los div normalmente se disponen a la derecha mientras haya espacio. Ejemplos

• Una sola caja que flota a la izquierda, la otra ocupa el espacio inferior, pero el contenido (contenido del div muestra) se protege apareciendo a la derecha Ver ejemplo
• Siguiendo con el ejemplo anterior, si la caja muestra, también flota a la izquierda, se pondrá a continuación de la primera y no debajo. Para romper, y que la última caja se ponga debajo utilizamos la etiqueta clear:both . Ver ejemplo
• Tres cajas flotando a la izquierda Ver ejemplo

  Importante la etiqueta clear final, si no se incluyese no rompe y aparecería como en el siguiente ejemplo: Ver ejemplo

• Dos cajas con float, una que rompe (la inferior) y otra con posición absoluta

                          Ver ejemplo
                          

• Caja fija que permite desplazar el contenido sin que se mueva la caja: menús, copyrights ...

  position: fixed; ejemplo

• display:flex La forma más sencilla de controlar las cajas div. Permite la disposición en columnas, verticales u horizontales de forma similar a las tablas.

  flex-direction Define la orientación.

  Las cajas utilizan el alto del mayor valor.

  ejemplo

  Más información sobre el uso de las cajas flexibles:

                               https://developer.mozilla.org/es/docs/Web/Guide/CSS/Cajas_flexibles 
                               http://css-tricks.com/snippets/css/a-guide-to-flexbox/