Cómo colocar muchos DIV en CSS

Question

He seguido un largo tutorial sobre W3Schooles para aprender CSS; Aprendí algunos conceptos básicos, pero aún extraño mi objetivo principal: posicionar DIV

Esto es lo que estoy tratando de hacer

*---------*---------*
*         *         *
*         *         *
*---------*---------*

Mi objetivo es simple y trivial para algunos, pero tengo dolores de cabeza al hacerlo de la manera correcta , de hecho lo hice pero tiene muchos problemas cuando agrego más texto a los DIV o simplemente se fusionan con otros DIV

Lo que hice fue simplemente jugar con los valores de margen y relleno usando FireBug. Todo lo que necesito ahora es aprenderme este truco simple (espero), lo que me falta es: ¿cómo funciona este posicionamiento simple? ¿Debo usar posicionamiento absoluto y relativo? Cambiar el margen, el relleno, el tamaño ??

Si tiene un buen tutorial que explique este punto, por favor apúntelo. Tenía otros dolores de cabeza buscando eso en Google.

Answer 1

Parece que está intentando flotar dos columnas una al lado de la otra. Esto es bastante simple y cubierto en profundidad aquí:

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout / 2-col /

Tiendo a mantenerme alejado de la propiedad position a menos que tenga que superponer algunos elementos.

Answer 2

Crear un diseño de 2 columnas en CSS

Personalmente, no me gusta usar un clear: ambos en una etiqueta br.

Use desbordamiento: auto en el div padre en su lugar

<div class="container" style="overflow: auto">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
</div>

Answer 3

He tenido buena suerte emulando el código encontrado en el sistema de cuadrícula 960 .

La forma correcta es difícil porque muchas cosas no son realmente compatibles con el navegador cruzado. Los navegadores están mejorando, pero sigue siendo una pesadilla si tienes que usar cualquier cosa compatible con IE. (muchos hacks)

Answer 4

Con un posicionamiento absoluto puedes colocar absolutamente cualquiera de tus div. El inconveniente es que están atrapados en esas posiciones sin importar la resolución o el tamaño de la ventana que muestra su página.

Lo que podría hacer es flotar su columna izquierda hacia la izquierda, y luego no especificar flotando en la columna derecha. Mantenga el posicionamiento predeterminado al no especificar absoluto ni relativo, luego simplemente ajuste el ancho de los elementos según sea necesario.

Answer 5

Si está de acuerdo con establecer anchos específicos en sus divs, lo siguiente me ha funcionado bien:

<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>

El '' flotador: izquierda '' hace que las columnas se alineen una al lado de la otra. El último div (con el claro: ambos) hace que todo lo que coloque después de las columnas permanezca debajo de las columnas. De esta manera, puede cambiar el ancho de cualquiera de las columnas sin alterar el estilo de la otra.

Answer 6

<div class="container">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
    <br style="clear:both" />
</div>