como hacer que un div este al lado del otro?

Alfonso1 · #1 (**permalink**) 21/11/2010, 14:40

tengo un div principal de 800px de ancho, y quiero que dentro hallan 2 divs de 400px de ancho, uno alado del otro.

esto es lo de la hoja de estilo:

#principal {width:800px}
#div1 {width:400px}
#div2 {width:400px}

eso es lo que tengo en el html:

<html>
<head>
<title>titulo</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
</head>
<body>
<div id="principal">
<div id="div1">
<p>parrafo</p>
</div>
<div id="div2">
<p>parrafo</p>
</div>
</div>
</body>
</html>

zerokilled · #2 (**permalink**) 21/11/2010, 14:56

¿sabes lo que son elementos tipo bloque y lineal? pues por ahi va tu tema. los elementos tipo bloque se "renderizan" cada una en una nueva linea mientras que los lineales tienen un flujo contigüo. hay varias propiedades para cambiar ese comportamiento pero la que mejor te conviene es float.

Dioz · #3 (**permalink**) 22/11/2010, 02:27

Usando float como te dijeron ;).

#principal {width: 800px;}
#div1 {width: 400px; float: left:}
#div2 {width: 400px; float: left;}

Tambien podes cambiar los widths a 50% para que abarquen la mitad cada uno, siempre y cuando no uses padding en el principal o margin en los div1 o div2, sino vas a tener problemas:
#div1 {width: 50%; float: left:}
#div2 {width: 50%; float: left;}

Si el div #principal no baja del todo, inclui un div de 'class="clear"' al fondo:
.clear {clear: all;}

Saludos!