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:boot;
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

Un comentario a “Colocar un div junto de otro (Seguimos con los cursos)”

5 04 2008
Federico (20:27:09) :

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

Deja un comentario

Puedes usar estas etiquetas : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>