CSS: DIV Cajas se superponen entre sí y ocultan texto.¿Cómo "despejarlos"?

Question

Tengo un pequeño problema con mis cajas DIV que parece que no puedo resolver.

Estoy creando dinámicamente estas cajas DIV:

<div id="pagelist">
<div class="pagelist_img"><img src="images/default.gif"></div>
<div class="pagelist_h1">HEADLINE</a></div>
div class="pagelist_excerpt">SUMMARY</div>
</div>

Cada caja DIV consiste como se muestra de una imagen en la parte superior, luego el titular y un breve resumen del poste.Ahora, mi problema es que las cajas se superponen entre sí, pero lo suficiente, por lo que la parte resumen está oculta debajo de la imagen del cuadro DIV debajo.

De acuerdo, podría ser un poco confuso, pero el punto de la línea es que de alguna manera las cajas no están separadas, pero se superponen entre sí.

Mi CSS para la caja DIV Pagelist es:

#pagelist{
    float: left;
    width: 280px;
    margin: 0 40px 20px 0;
    position: relative;
    height: 100px;

}

.pagelist_h1 {
    font-size: 1.8em;
    font-weight: bold;
}

.pagelist_img{
    clear:both;
    top: 0px;
    position: relative;
}

.pagelist_excerpt, .pagelist_excerpt p {
    font-size: 1em;
    color: #000000;
    clear:both;
}

Espero que algunos tengan una solución o puedan apuntarme en la dirección correcta porque lo he intentado durante algún tiempo ahora para resolverlo, sin suerte.Aunque era solo una cuestión de usar la etiqueta tanto , pero no hizo nada.

sincera
- Mestika

Answer 1

Use a clearfix. Something along the lines of:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    zoom: 1;     /* triggers hasLayout */
}

And modify your markup to be

<div id="pagelist" class="clearfix">

http://www.positioniseverything.net/easyclearing.html

Also, see the dupes:

• How to fix IE7 float-clear combination
• IE7 Clear Float Issue
• Which clearfix method?
• ClearFix vs Overflow
• What methods of ‘clearfix’ can I use?

Answer 2

Try removing the positioning and clears, as default <div>s are block level and should display one under the other.

Made an example with your code.