Poner dos divs al mismo nivel sin position:absolute

wakewakeup · #1 (**permalink**) 19/01/2006, 10:12

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

furoya · #2 (**permalink**) 19/01/2006, 10:51

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

PatomaS · #3 (**permalink**) 19/01/2006, 10:54

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

wakewakeup · #4 (**permalink**) 23/01/2006, 05:36

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

El sillero · #5 (**permalink**) 23/01/2006, 10:23

Si, sería poner todos los divs que quieras mostrar en linea con float.

wakewakeup · #6 (**permalink**) 23/01/2006, 10:29

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?

kemie · #7 (**permalink**) 23/01/2006, 10:48

le pones al div de abajo la propiedad clear:both :)

furoya · #8 (**permalink**) 23/01/2006, 11:16

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.

RoQ · #9 (**permalink**) 23/01/2006, 12:35

El clear:both es perfectamente valido, mas bien clear:all no existe
http://html.conclase.net/w3c/css1-es.html#clear

wakewakeup · #10 (**permalink**) 24/01/2006, 02:31

ok gracias a todos!

furoya · #11 (**permalink**) 26/01/2006, 14:08

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>

kemie · #12 (**permalink**) 27/01/2006, 03:08

puedes intentar
<div style="clear:both"></div>

furoya · #13 (**permalink**) 27/01/2006, 12:03

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.