como hacer que un div este al lado del otro?

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">


parrafo</p>
</div>
<div id="div2">


parrafo</p>
</div>
</div>
</body>
</html>
#principal {width:800px}
#div1 {float:left;width:400px}
#div2 {float:right;width:400px}
usa los comandos "float" , estudia un poco esos comandos en internet para que veas como funcionan!