Foros del Web » Creando para Internet » CSS »

Colocar dos o mas divs en la misma linea

Estas en el tema de Colocar dos o mas divs en la misma linea en el foro de CSS en Foros del Web. Como puedo colocar varias divs en la misma linea, es decir una seguida de otra? Tengo problemas ya que al colocar varias divs me las ...
  #1 (permalink)  
Antiguo 31/01/2011, 18:49
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 10 años, 2 meses
Puntos: 1
Colocar dos o mas divs en la misma linea

Como puedo colocar varias divs en la misma linea, es decir una seguida de otra? Tengo problemas ya que al colocar varias divs me las organiza una debajo de la otra y no puedo hacer que queden una al lado de la otra.
  #2 (permalink)  
Antiguo 31/01/2011, 19:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Colocar dos o mas divs en la misma linea

Declare un tamaño y un float.
También puede cambiar su display: block (inherente) a inline-block (ie no lo soportaría)
  #3 (permalink)  
Antiguo 31/01/2011, 19:08
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: Colocar dos o mas divs en la misma linea

No me funciona, aca les dejo el codigo para que lo vean:
Código HTML:
Ver original
  1. <div style="margin:0px; width:800px;">
  2.   <div style="width:25%; float:left; display:block;">
  3.   CONTENIDO
  4.   </div>
  5.   <div style="clear:both"></div>
  6.   <div style="width:25%; float:left; display:block;">
  7.   CONTENIDO
  8.   </div>
  9. </div>

Me los sigue mostradno uno abajo del otro.
  #4 (permalink)  
Antiguo 31/01/2011, 19:16
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Colocar dos o mas divs en la misma linea

Yo uso IE8 y la propiedad display:display-inline funciona aparentemente sin problema.
Otra posibilidad sería también display:inline.
  #5 (permalink)  
Antiguo 31/01/2011, 19:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Colocar dos o mas divs en la misma linea

Cita:
Iniciado por aguila_393 Ver Mensaje
No me funciona, aca les dejo el codigo para que lo vean:

Cita:
<div style="margin:0px; width:800px;">
<div style="width:25%; float:left; display:block;"> <!-- display: block sobra y es un eror. el float ya lo convierte en línea
CONTENIDO
</div>
<div style="clear:both"></div> <!-- Busque información sobre clear:both. Por ejemplo aquí (en propiedades)
<div style="width:25%; float:left; display:block;">
CONTENIDO
</div>
</div>
Me los sigue mostradno uno abajo del otro.
Pero como intuyo que se está iniciando en css, pase por www.librosweb.es
  #6 (permalink)  
Antiguo 31/01/2011, 19:19
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Colocar dos o mas divs en la misma linea

Al colocar un div con la propiedad clear, estás anulando la flotación que declaraste en el div anterior. ¿Qué sentido tiene utilizarla ahí?
  #7 (permalink)  
Antiguo 31/01/2011, 19:26
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Colocar dos o mas divs en la misma linea

Cita:
Iniciado por sanxuan Ver Mensaje
Yo uso IE8 y la propiedad display:display-inline funciona aparentemente sin problema.
Otra posibilidad sería también display:inline.
Creo que debe ser un error de dedo (despiste)

Preciso: display: inline-block no es soportada en ie por las versiones anteriores a la última (8) para los elementos que por naturaleza son de bloque.
  #8 (permalink)  
Antiguo 31/01/2011, 19:39
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: Colocar dos o mas divs en la misma linea

Ya logre hacerlo funcionar. Ahora tengo una duda mas, como hago para hacer uno o dos espacios en blanco entre cada div? Probe poniendo pero no funciono. Y si, soy bastante malo para esto.
  #9 (permalink)  
Antiguo 31/01/2011, 20:03
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Colocar dos o mas divs en la misma linea

Usa un margen. Decláralo con margin, margin-left, margin-right, margin-top, o margin-bottom.
  #10 (permalink)  
Antiguo 01/02/2011, 03:09
 
Fecha de Ingreso: enero-2007
Mensajes: 146
Antigüedad: 10 años, 10 meses
Puntos: 16
Respuesta: Colocar dos o mas divs en la misma linea

Los margin y los padding pueden dar problemas en versiones antiguas de IE, asi que otra solución (aunque menos elegante), es añadir un div con ancho definido y con la propiedad float entre los dos divs que quieres separar.
  #11 (permalink)  
Antiguo 01/02/2011, 05:25
Avatar de AubeRoseau  
Fecha de Ingreso: diciembre-2010
Ubicación: Sevilla
Mensajes: 90
Antigüedad: 7 años
Puntos: 2
Respuesta: Colocar dos o mas divs en la misma linea

Cita:
Iniciado por aguila_393 Ver Mensaje
Ya logre hacerlo funcionar. Ahora tengo una duda mas, como hago para hacer uno o dos espacios en blanco entre cada div? Probe poniendo pero no funciono. Y si, soy bastante malo para esto.
Sería interesante que pusieras como conseguiste resolverlo. Así este post sería mucho más funcional
  #12 (permalink)  
Antiguo 01/02/2011, 08:38
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Respuesta: Colocar dos o mas divs en la misma linea

Usa como ya te han dicho

display: inline;

Ó

float: left;

Te valdrán ambos.

Un saludo.
  #13 (permalink)  
Antiguo 04/02/2011, 21:20
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Colocar dos o mas divs en la misma linea

Obviamente es un error. Quise decir display:inline-block. Gracias por la corrección.
  #14 (permalink)  
Antiguo 05/02/2011, 03:57
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Colocar dos o mas divs en la misma linea

Hola:

¿Puedes argumentar esto?

Cita:
Iniciado por WeSoRz Ver Mensaje
Los margin y los padding pueden dar problemas en versiones antiguas de IE
Es la primera noticia que tengo al respecto.

Saludos.

  #15 (permalink)  
Antiguo 05/02/2011, 05:00
 
Fecha de Ingreso: enero-2007
Mensajes: 146
Antigüedad: 10 años, 10 meses
Puntos: 16
Respuesta: Colocar dos o mas divs en la misma linea

Entre lo de los estándares y ésto... Casi que se le quitan a uno las ganas de abrir la boca para ayudar si voy a tener que justificar absolutamente todo lo que diga.
http://www.webcredible.co.uk/user-fr...explorer.shtml

Última edición por WeSoRz; 05/02/2011 a las 05:19
  #16 (permalink)  
Antiguo 05/02/2011, 08:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Colocar dos o mas divs en la misma linea

@WeSoRz
No, no es justificar. Lo que ocurre es que la forma como hizo su afirmación en #10 induce a catalogarla como errónea.
Puede que sea por una comprensión parcial del artículo que enlaza y de la fecha del mismo (2006)
Lo que le ocurre a ie (en general) es que implementa un modelo de caja (box model) distinto al estandar definido por la w3c y en ciertas circustancias aparecen algunos bugs que tienen como protagonistas a los márgenes/paddings/bordes, acentuados si entran en modo quirks (por no declarar doctype)
Pero resumiendo, los ie no tienen problemas para mostrar los bordes/padding/margin definidos en el css. Lo que hacen es restarlos del tamaño definido al elemento, en vez de sumarlos como dicta el standar.

Creo que le será beneficioso actualizar alguno de los documentos de consulta que utiliza.
  #17 (permalink)  
Antiguo 05/02/2011, 09:41
 
Fecha de Ingreso: enero-2007
Mensajes: 146
Antigüedad: 10 años, 10 meses
Puntos: 16
Respuesta: Colocar dos o mas divs en la misma linea

Cita:
Iniciado por kseso? Ver Mensaje
@WeSoRz
No, no es justificar. Lo que ocurre es que la forma como hizo su afirmación en #10 induce a catalogarla como errónea.
Puede que sea por una comprensión parcial del artículo que enlaza y de la fecha del mismo (2006)
Lo que le ocurre a ie (en general) es que implementa un modelo de caja (box model) distinto al estandar definido por la w3c y en ciertas circustancias aparecen algunos bugs que tienen como protagonistas a los márgenes/paddings/bordes, acentuados si entran en modo quirks (por no declarar doctype)
Pero resumiendo, los ie no tienen problemas para mostrar los bordes/padding/margin definidos en el css. Lo que hacen es restarlos del tamaño definido al elemento, en vez de sumarlos como dicta el standar.

Creo que le será beneficioso actualizar alguno de los documentos de consulta que utiliza.
Para mi eso es un problema (y bastante serio), el que no cumpla los estándares W3C. Claro que los muestra, pero insisto, sin cumplir el W3C, lo cual termina acarreando problemas (que es a lo que yo me refería).

No suelo consultar manuales y/o artículos, y ese que puse fue el primero que encontré en google ya que no me apetecía ponerme a justificar mi comentario, donde creo que queda claro que me refiero a versiones antiguas (MSIE 6, por ejemplo, que si no me equivoco es del 2001, y que se sigue utilizando por desgracia), por lo que la fecha de un artículo no significa que deje de tener validez el mismo.
Dicho de otro modo, ese artículo sigue siendo perfectamente válido para las versiones antiguas de IE. Precisamente donde no se contemplaría esa información sería en documentación actual donde en la mayoría de los casos los autores piensan que todo el mundo está a la última en versiones de software.

Mi única intención era ayudar a la gente (todos mis comentarios menos 1, el que hice allá por 2007, son para tratar de ayudar), pero si pueden llevar a confusión o pueden provocar equivocaciones y malentendidos, no tendré ningún problema de moderarme y limitarme a leer, sin ningún tipo de mal rollo.

Un saludo :)
  #18 (permalink)  
Antiguo 06/02/2011, 13:21
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Colocar dos o mas divs en la misma linea

Hola:

Cita:
Iniciado por WeSoRz Ver Mensaje
Entre lo de los estándares y ésto... Casi que se le quitan a uno las ganas de abrir la boca para ayudar si voy a tener que justificar absolutamente todo lo que diga.
Cita:
Iniciado por WeSoRz Ver Mensaje
pero si pueden llevar a confusión o pueden provocar equivocaciones y malentendidos, no tendré ningún problema de moderarme y limitarme a leer, sin ningún tipo de mal rollo.
Ni se trata de justificar ni de limitarse a leer, simplemente en vez de soltar una afirmación como la que has dado hubieras "perdido" cinco minutos más en explicar la diferencia entre el modelo de cajas de IE y el resto de navegadores no habría surgido esta "discusión", por llamarlo de alguna manera.

Lo que se trata es de no inducir a error a quien tiene una duda por error de codificación o falta de conocimientos, es así de sencillo.

Y por su puesto por mi parte, y conociendo a Kseso? me atrevo a hablar en su nombre, aclarar que no hay ningún tipo de mal rollo.

Saludos.


Etiquetas: dos, linea, mas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:31.