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

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.

Anuncios
Acerca de

Programador, usuario Linux e hincha de Millonarios de Colombia

Tagged with: , , , , , ,
Publicado en Css para principiantes, General, manuales, Trucos css, webmaster
24 comments on “Colocar un div junto de otro (Seguimos con los cursos)
  1. Federico dice:

    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

  2. Diego dice:

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

  3. Hellhammer dice:

    Si, es clear:both, ese es un pequeño error de dedo, o de idioma xD pero el significado si se entendió….muchas gracias

  4. Hellhammer dice:

    Div, cajón, capa…exactamente lo mismo….

  5. Liset dice:

    Hola he leido esto porque estoy haciendo algo parecido y me pasa que cuando restauro la ventana del explorador, pues los div bajar a la proxima linea y lo que antes se veia como un div al lado del otro se me desordena.
    Alquien sabe si puedo arreglar esto?

  6. Fernando dice:

    Muy bueno, me simplificaste un sitio, despues de dias de buscar como terminar de entender DIVS… Seguire visitiando tu Blog ya que esta muy interesante el contenido y se ve tu apertura mental en que “dificil” que sea Facil.
    Abrazo y felicitaciones devuelta , Fernando.

  7. Gracias te doy en mi blog.

  8. Muchas gracias por el recorderis del clear: both.

    Saludos.

  9. Euby dice:

    Excelente me ayudo mucho. gracias por el aporte…

  10. Antonio dice:

    Buenas tardes

    Señores, tengo una duda si alguien me puede colaborar se los voy a agradecer infinitamente ya que yo no he podido.

    En un div de dimensiones fijas coloco varias imágenes de una en una (rotan), el tamaño de las imagenes varia.

    He intantado de todas las formas posibles pero no he podido hacer que las imagenes me queden centradas de forma vertical y horizontal, lo único que he logrado es el centrado horizontal, el vertical no he podido

    Por su colaboracion mil gracias

  11. kano dice:

    gracias me ayudo mucho !!

  12. Gino dice:

    Muy bueno la simplificación del ejemplo.
    Ahora si yo uso el cajón 1 y el cajón 2 como botones o etiquetas, en la mitad de una página, como tengo que hacer para que me habrá debajo de ellos, según en el que haga click, otro div con imágenes pequeñas, siempre sin cambiar de pagina.

  13. Felipe dice:

    Si el Div2 no se situa al lado de Div1 sino debajo, es posible que el espacio al lado del Div1 no sea suficiente para el ancho del Div2. Debes darle al Div2 menos ancho para que encaje en la parte superior.

  14. lupita dice:

    hola buenas tardes, necesito tu ayuda como puedo poner un div en dos bloqs dentro de un div que contiene una imagen como fondo

  15. jefer dice:

    Gracias me has aclarado estos puntos. navegare mas el sitio 🙂

  16. OZ dice:

    gracias por la ayuda

  17. Melissa dice:

    te amo!! gracias a vos ya pude después de 1000 horas

  18. MariT dice:

    Graciiiiias Bendiciones

  19. Buen día, tengo un proyecto en el cual pongo noticias en la web se van agreando pero me dejan espacio unas tras otra como puedo eliminar eso y que se agreguen sin espacio, gracias.

  20. Jack3line dice:

    Gracias me ayudo muchisimooo !!!

  21. Alejandro dice:

    Muchas gracias!!!!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Sígueme en Twitter
Categorías
Flickr Photos
¡Apareció Linux!

Mirando de lado

Café

Más fotos
A %d blogueros les gusta esto: