Dos columnas en div - cuál usar 1) flotar junto con margen o 2) dos flotadores

Question

Tengo dos divs en un recipiente. Uno se queda bar y otro es barra de la derecha. Necesito un consejo y / o sugerencias para utilizar el método.

Método 1:

#container{ width:800px; margin:0 auto;}
#leftbar{ float:left; width:200px; }
#rightbar{ float:right: width:550px;}

Método 2:

#container{width:800px; margin:0 auto;}
#leftbar{ float:left; width:200px; }
#rightbar{ margin:0 0 0 210px; width:550px;}

Por favor, consejos cuál es una buena práctica.

Answer 1

Si el contenedor está siempre siempre siempre va a ser 800px ancho entonces realmente no importa cuál de las dos opciones que utiliza. Sólo tiene que utilizar el que tiene la menor cantidad de bytes por archivo.

Pero si el contenedor se hace más grande que 800px, ¿le gustaría la barra de la derecha se pegue al lado derecho del contenedor? Si es así, único método funcionaría 1.

Sin embargo hay otro método que logre el mismo efecto que el método 2 que está flotando ambos divs a la izquierda.

Answer 2

Semánticamente no hace ninguna diferencia desde 550 + 200 = ~ 800 px por lo que no está dando ninguna pista de lo que los dos divs deben hacer cuando, por ejemplo, el contenedor es de 1000 px.

Answer 3

O está bien, pero en el método 1 que tendrá un "canal" de 50px entre los divs, mientras que sólo será 10px en el método 2.

Answer 4

No hace ninguna diferencia práctica en esta etapa, pero el método más preparada para el futuro es la primera, ya que le permite cambiar el ancho del contenedor más adelante sin tener que cambiar el css RightBar para mantenerla totalmente derecha alineados.

Answer 5

Si desea utilizar un código robusto que no necesitó mucho pensando en, entonces se podría utilizar un marco basado en grid como el Yahoo interfaz de usuario, o el rel="nofollow 960 rejilla .

Tanto ofrecer marcos CSS / HTML fáciles de usar que permiten una variedad de diseños.