CSS:As caixas Div se sobrepõem e ocultam o texto.Como “limpá-los”?

Question

Tenho um pequeno problema com minhas caixas div que não consigo resolver.

Estou criando dinamicamente estas caixas 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 caixa div consiste, conforme mostrado, em uma imagem na parte superior, depois no título e em um breve resumo da postagem.Agora, meu problema é que as caixas se sobrepõem, mas apenas o suficiente para que a parte do resumo fique oculta abaixo da imagem da caixa div abaixo dela.

Ok, pode ser um pouco confuso, mas o objetivo da linha é que, de alguma forma, as caixas não estão separadas, mas estão sobrepostas umas às outras.

Meu CSS para a caixa div da lista de páginas é:

#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 alguns tenham uma solução ou possam me indicar a direção certa, porque já há algum tempo tentei resolver sozinho, sem sorte.Achei que era apenas uma questão de usar o limpar ambos tag, mas não fez nada.

Sincero
- Mestica

Answer 1

Use um clearfix.Algo como:

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

E modifique sua marcação para ser

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

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

Além disso, veja os idiotas:

• Como consertar a combinação float-clear do IE7
• Problema de flutuação clara do IE7
• Qual método clearfix?
• ClearFix versus estouro
• Que métodos de ‘clearfix’ posso usar?

Answer 2

Tente remover o posicionamento e limpar, como padrão <div>s estão no nível do bloco e devem ser exibidos um abaixo do outro.

Fiz um exemplo com seu código.