Propiedad float:left, como usarla

[pcerrato]

Buenas Noches!!

Me llamo Pedro y estoy empezando con la maquetación css, y haciendo unas pruebas me he encontrado con un error que no soy capaz de arreglar.

Es usando la propiedad float:left para poner 3 cajas seguidas (en horizontal). Sin embargo, al ponerles dicha opción las cajas se salen del flujo normal del documento y se colocan fuera de sitio.

Muchas gracias de antemano por vuestra ayuda

Os pongo el código css y html:

<div id="contenedor">

<!-- <div class="vacio"></div> -->

<!-- Desarrollo de la cabecera -->

<div id="cabecera">
<h1>PEDRO web</h1>
</div>
<div class="vacio"></div>

<!-- Desarrollo de la parte central -->

<div id="central">
<div id="webs">
<div id="caja1" class="caja">
<div class="titulocaja">Título 1</div>
<div class="texto">
<a href="#">Pagina de pruebas</a>
</div>
</div>
<div id="caja2" class="caja">
<div class="titulocaja">Título 2</div>
<div class="texto">
<p>Por ahora vacío</p>
</div>
</div>
</div>
<div id="caja3" class="caja">
<div class="titulocaja">Título 3</div>
<div class="texto">
<p>Por ahora vacío</p>
</div>
</div>
</div>
</div>

-----

#contenedor {
width: 920px;
margin: 0 auto;
padding: 15px;;
background: #FFFFFF;
box-shadow: rgba(0, 0, 0, 0.199219) 0 0 8px 8px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.vacio {
width: 100%;
height: 15px;
}
/* Cabecera de la pagina */
#cabecera {
width: 860px;
height: 75px;
margin: 10px 30px 10px 30px auto;
border: 1px solid black;

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
background: #00468D;
}
#cabecera h1 {
margin: 5px 5px 5px 20px;
font-size: 24px;
line-height: 65px;
color: white;
}
/* Parte central *
#central {
width: 860px;
margin: 10px 30px 10px 30px auto;
padding: 15px;
border: 1px dotted black;
float: left;
}
#webs {
width: 860px;
border: 1px dotted black;
float: left;
}
.caja {
width: 175px;
height: 225px;
border: 1px solid black;
border-radius: 8px;
float: left;
}
#caja2 {
width: 175px;
height: 225px;
}
.titulocaja {
width: 100%;
height: 35px;
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #999999 100%);
background: -moz-linear-gradient(center top , #FFFFFF 0%, #999999 100%) repeat scroll 0 0 transparent;

border-top-left-radius: 8px;
border-top-right-radius: 8px;
line-height: 35px;
font-size: 16px;
font-weight: bold;
}
.texto {
width: 70%;
height: 70%;
margin: 20px 0px auto;
}

[tommy_tony]

No revise el código ,pero mas o menos se a lo que te refieres , ¿tienes un div y en ese div dos div al que les pusiste la propiedad float pero cuando usas tal propiedad se salen del div contenedor? si es eso xD , la solución es sencilla , lo que ocurre es que cuando usamos la propiedad float , los elementos con esta propiedad no son reconocidos por , en este caso , el div contenedor y se salen de este,yo usualmente (no sé si sea la más recomendada)uso esto:

<p style="clear:both"></p>

esto se coloca después de los elementos con float , osea algo así:

<div id="webs">
<div id="caja1" class="caja">
<p style="clear:both"></p>

ahí creo que es tu problema, de todos modos siempre cuando uses float coloca ese código después de los elementos con esta propiedad.

[pzin]

Si es lo que dice tommy_tony, no es que realmente se salgan. Lo que pasa es que la capa padre no crece con ellos.

Una solución más fácil es ponerle a ese elemento padre un overflow:auto o hidden.

[pzin]

De todas formas, tienes ahí un comentario sin cerrar.

Código CSS:

/* Parte central *
 

No sé si te fijaste o sólo fue al copiar aquí. Ayudaría a saber también qué es lo que pasa exactamente, qué es lo que te parece que no funciona bien, y no digas capas o cajas, di los #ids o .clases que no se comportan como esperas.

[pcerrato]

Buenos días!!

Muchas gracias por vuestras rápidas respuestas, ... he probado ambas soluciones y funcionan a la perfección.

De verdad, cuanto tiempo perdido, aunque me ha ayudado a entender mejor la maquetación.

Tendré en cuenta los consejos a la hora de redactar los temas en un foro.

Un saludo y de nuevo gracias
Pedro.