Hola a todos. Estoy practicando posicionamiento de cajas y me he encontrado con la siguiente situación.
Utilizando el código que marco a continuación, creo dos cajas padre (Una dentro de otra). En
cajapadre1 creo una pequeña caja (
caja1) y la posiciono con float: left. Dentro de
cajapadre2 colo otras dos cajas (
caja2 y
caja3) y también las posiciono con float:left. La cosa es que caja2 y caja 3 se posicionan dejando un espacio en blanco a su izquierda. ¿Podéis explicame porqué?
Código:
<html>
<head> <title> Prueba posicionamiento con cajas</title>
<style type = "text/css">
.cajapadre{width: 300px; height: 300px; border: 2px solid black;}
.cajapadre2{width: 200px; height: 200px; border: 2px solid black; position: relative; top:100px;}
.caja1{width: 50 px; height: 50px; border: 2px solid pink; margin: 5px; float: left;}
.caja2{width: 50 px; height: 50px; border: 2px solid pink; margin: 5px; float: left;}
.caja3{width: 50 px; height: 50px; border: 2px solid pink; margin: 5px; float: left;}
</style>
</head>
<body>
<div class = cajapadre>
<div class = caja1>Caja 1</div>
<div class = cajapadre2>
<div class = caja2>Caja 2</div>
<div class = caja3>Caja 3</div>
</div>
</div>
</body>
</html>
Gracias y un saludo.