Colocar un div junto de otro (Seguimos con los cursos)

23 01 2008

Float,clear

Hasta ahora hemos visto como crear divs, con clases… y si hemos analizado los divs son verticales, pero no sabemos aun como se colocan divs horizontales, entonces es muy sencillo de haces, pero algunas personas tienden a confundirse.
Para indicarle al navegador que divs queremos que queden juntos verticalmente, le damos la propiedad float.
Depende de a donde lo queramos alinear le daremos left ó right. Entonces:
#cajon1{
float:left;
}
#cajon2{
float:left;
}
Ahora, para diferenciarlo, vamos a colocarle colores a cada cajón:
#cajon1{
float:left;
background:#CC6600;

}
#cajon2{
float:left;
background:#000FFF;

}
Algo asi quedaría.
cuadros
Para los descuidadines, aqui les coloco el codigo html….
<div id=”div1″>Texto que va en el div1</div>
<div id=”div2″>Texto que va en el div2</div>

Hey!!! pero aun no hemos acabado, digamos que queremos que un div no siga siendo alado, para que quede abajo… le damos la propiedad clear:boot;, nos dará un resultado asi:
divs
Si se observa el div3 se bajo… entonces les voy a mostrar el código css:

#cajon3{
clear:both;
background:#000FFF;

}

<div id=”div1″>Texto que va en el div1</div>
<div id=”div2″>Texto que va en el div2</div>
<div id=”div3″>Texto que va en el div3</div>

Ya es parte de su imaginacion como usar estas propiedades, no es necesario usar tablas para organizar nuestras webs, recuerda solo usar tablas cuando muestres datos estadisticos.


Acciones

Información

2 respuestas

5 04 2008
Federico

Hola, antes que nada gracias por los “tips”, lo haces mas sencillo :-)

Fíjate cuando pones:

#cajon3{
clear:boot;
background:#000FFF;
}

Creo que seria clear:both en lugar de clear:boot o por lo menos así pude hacer que funcione el ejemplo.

Saludos y nuevamente gracias

12 01 2009
Diego

Texto que va en el div1 ??? no será “cajon1″ ????

Deja un comentario