Colocar dos o mas divs en la misma linea

aguila_393 · #1 (**permalink**) 31/01/2011, 18:49

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.

kseso? · #2 (**permalink**) 31/01/2011, 19:01

Declare un tamaño y un float.
También puede cambiar su display: block (inherente) a inline-block (ie no lo soportaría)

aguila_393 · #3 (**permalink**) 31/01/2011, 19:08

No me funciona, aca les dejo el codigo para que lo vean:

Código HTML:

Ver original<div style="margin:0px; width:800px;">
  <div style="width:25%; float:left; display:block;">
  CONTENIDO
  </div>
  <div style="clear:both"></div> 
  <div style="width:25%; float:left; display:block;">
  CONTENIDO
  </div>
</div>

Me los sigue mostradno uno abajo del otro.

sanxuan · #4 (**permalink**) 31/01/2011, 19:16

Yo uso IE8 y la propiedad display:display-inline funciona aparentemente sin problema.
Otra posibilidad sería también display:inline.

kseso? · #5 (**permalink**) 31/01/2011, 19:16

Cita:

Iniciado por aguila_393

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

sanxuan · #6 (**permalink**) 31/01/2011, 19:19

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í?

kseso? · #7 (**permalink**) 31/01/2011, 19:26

Cita:

Iniciado por sanxuan

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.

aguila_393 · #8 (**permalink**) 31/01/2011, 19:39

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.

sanxuan · #9 (**permalink**) 31/01/2011, 20:03

Usa un margen. Decláralo con margin, margin-left, margin-right, margin-top, o margin-bottom.

WeSoRz · #10 (**permalink**) 01/02/2011, 03:09

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.

AubeRoseau · #11 (**permalink**) 01/02/2011, 05:25

Cita:

Iniciado por aguila_393

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

ayukkonen · #12 (**permalink**) 01/02/2011, 08:38

Usa como ya te han dicho

display: inline;

Ó

float: left;

Te valdrán ambos.

Un saludo.

sanxuan · #13 (**permalink**) 04/02/2011, 21:20

Obviamente es un error. Quise decir display:inline-block. Gracias por la corrección.

jomaruro · #14 (**permalink**) 05/02/2011, 03:57

Hola:

¿Puedes argumentar esto?

Cita:

Iniciado por WeSoRz

Los margin y los padding pueden dar problemas en versiones antiguas de IE

Es la primera noticia que tengo al respecto.

Saludos.

WeSoRz · #15 (**permalink**) 05/02/2011, 05:00

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

kseso? · #16 (**permalink**) 05/02/2011, 08:30

@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.

WeSoRz · #17 (**permalink**) 05/02/2011, 09:41

Cita:

Iniciado por kseso?

@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 :)

jomaruro · #18 (**permalink**) 06/02/2011, 13:21

Hola:

Cita:

Iniciado por WeSoRz

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

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.