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