Foros del Web » Creando para Internet » CSS »

Poner dos divs al mismo nivel sin position:absolute

Estas en el tema de Poner dos divs al mismo nivel sin position:absolute en el foro de CSS en Foros del Web. Tengo un div contenedor y dentro de el voy a tener varios divs como quiero que estén en la misma "fila" como si fueran celdas ...
  #1 (permalink)  
Antiguo 19/01/2006, 10:12
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 2 meses
Puntos: 1
Poner dos divs al mismo nivel sin position:absolute

Tengo un div contenedor y dentro de el voy a tener varios divs como quiero que estén en la misma "fila" como si fueran celdas de una tabla, pero quiero conseguirlo sin dar posicion absoluta, cual es la manera correcta de hacerlo?
Lo hago así pero el dos se pone bajo el uno

Código:
<div id="seleccion" style="width: 300px;height: 100px;border: thin solid Red" >
	<div  style="border: thin solid Black;width:100px">
		uno
	</div>
	<div  style="border: thin solid Black;width:120px">
		dos
	</div>
</div>
Se ve así:


Graciass
  #2 (permalink)  
Antiguo 19/01/2006, 10:51
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola wakewakeup :

Es lógico; y el tema ya se trató un par de veces. Los div son bloques, y no se pueden poner en línea. O sí, cambiando el display: inline. Pero eso funcionaba bien en IE5. Ahora se comportan "inline" también hacia adentro y el contenido se desarma.

Listas de lado
  #3 (permalink)  
Antiguo 19/01/2006, 10:54
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Hola

Basicamente, has de usar el float a fin de sacar una de las capas del flujo normal de la página, aquí te dejo un código de ejemplo:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="language" content="ES" />
	<meta http-equiv="Content-Language" content="es" />
	<title>Pruebas del uso de float</title>
	<style type="text/css">
		* {
			border: 0px;
			margin: 0px;
			padding: 0px;
		}
		.contenedor {
			top: 0px;
			left: 0px;
			width: 50%;
			background-color: #cccccc;
		}
		.capa1 {
			border: 1px solid #ff0000;
			width: 40%;
			float: right;
		}
		.capa2 {
			border: 1px solid #00ff00;
			width: 40%;
		}
	</style>
</head>
<body>
<div class="contenedor">
	<div class="capa1">primera capa</div>
	<div class="capa2">segunda capa</div>
</div>
</body>
</html>
Algunas propiedades de las que usé, son solo confines de facilitar la visión del ejemplo.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #4 (permalink)  
Antiguo 23/01/2006, 05:36
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 2 meses
Puntos: 1
Ah vale, se me ocurrio que podia ser con flotantes pero pensaba que habría una forma menos "chapucera" de hacerlo.
Para meter varios divs en una fila (mas de 2) sería poniendo todos float left por ejemplo?
graciass
  #5 (permalink)  
Antiguo 23/01/2006, 10:23
 
Fecha de Ingreso: noviembre-2005
Mensajes: 19
Antigüedad: 12 años, 1 mes
Puntos: 0
Si, sería poner todos los divs que quieras mostrar en linea con float.
__________________
El sillas para hoteles
  #6 (permalink)  
Antiguo 23/01/2006, 10:29
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 2 meses
Puntos: 1
Ok graciass pero supon que tengo una fila con 3 divs en linea, y debajo quiero poner un texto pero claro como están los 3 divs en float se me pone tambien en linea.
QUe se hace en ese caso?
  #7 (permalink)  
Antiguo 23/01/2006, 10:48
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 6 meses
Puntos: 1
le pones al div de abajo la propiedad clear:both :)
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #8 (permalink)  
Antiguo 23/01/2006, 11:16
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola de nuevo :

En el ejemplo que puse arriba terminé haciendo eso, kemie; porque se me ocurrió validarlo y me rebotó el

Código:
<br style="clear:all" />
y creo que también con both. Pero el problema no era el estilo sino la etiqueta, que parece no se puede usar "suelta" entre 2 bloques. Debe haber alguna forma de pasarlo (como rodear el br con nbsp, se me ocurre) pero hay por allí la recomendación de usar un div con alto '0' y ancho'100%' que evitaría el poner en otro bloque lo que venga debajo. Además hay una diferencia en la distancia entre bloques en IE y FF que supongo se corregirá con este método. Un día de estos lo voy a probar.
  #9 (permalink)  
Antiguo 23/01/2006, 12:35
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
El clear:both es perfectamente valido, mas bien clear:all no existe
http://html.conclase.net/w3c/css1-es.html#clear
  #10 (permalink)  
Antiguo 24/01/2006, 02:31
 
Fecha de Ingreso: octubre-2004
Mensajes: 878
Antigüedad: 13 años, 2 meses
Puntos: 1
ok gracias a todos!
  #11 (permalink)  
Antiguo 26/01/2006, 14:08
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
De nada, wakewakeup .

Y tienes razón, RoQ , lo confundí con clear=all. De cualquier forma, lo que no pasa es el br, y ya descubrí en qué caso

Código:
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>qwerty</title>
</head>
<body>

<div>qwerty</div>

<br />

<div>qwerty</div>


</body></html>
porque si uso transitional no tengo problema.

¿Alguien sabe qué es lo que pasa? ¿El XHTML no acepta texto "huérfano"?

Dejo el mismo código del enlace de div's, pero sin el escript para igualar las alturas. En éste se ve el bloque separador y le validé el CSS. No me dio el código de la cucarda, pero supongo que es para copiarlo del código fuente.

Si no es así, por favor avísenme que lo borro.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head><title>DIV'S INLINE. </title>

<style type="text/css" >
body {
background-color : silver; 
font-size : 100%; 
color : black; 
} 
h1 {
font-size : 1.6em; 
} 
#yankee, #zulu {
float : left; 
width : 250px; 
background-color : yellow; 
border : 2px solid red; 
color : black; 
} 
.xray {
width : 90%; 
height : 1px; 
background-color : blue; 
font-size : 1px; 
color : black; 
} 
</style>

</head>
<body>
<h1>Qwerty qwerty. </h1>

<div id="yankee" >QWERTYUIOP <br />QWERTYUIOP<br />QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP </div>
<div id="zulu" >QWERTYUIOP <br />QWERTYUIOP</div>

<div class="xray"> </div>

  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> 

<a href="http://jigsaw.w3.org/css-validator">
<img style="width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="¡CSS Válido!"/>
</a>
			
  </p>

</body>
</html>
  #12 (permalink)  
Antiguo 27/01/2006, 03:08
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 6 meses
Puntos: 1
puedes intentar
<div style="clear:both"><!--abracadabra--></div>
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #13 (permalink)  
Antiguo 27/01/2006, 12:03
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Sí, no queda otra. El div soluciona lo de la diferencia de espaciado; pero en Firefox lo del ancho al 100% no funciona y sique quedando todo in line.

Pero todavía me queda la duda del por qué no puedo usar texto sin contenedor. Puedo imaginar alguna explicación, aunque estoy seguro de que existe una que no deba suponer.
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 05:04.