CSS：DIVボックスは互いに重なってテキストを隠します。それらを「クリア」する方法？

Question

私は私のDIVボックスが解決できないような問題があります。

これらの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>

.

各DIVボックスは、上の画像、次に見出し、およびPOSTの短い要約のように構成されています。さて、私の問題は、ボックスが互いに重なっているがただ十分であるので、要約部分はそれの下のDIVボックスの画像の下に隠されています。

大丈夫、それは少し混乱しているかもしれませんが、行のポイントはどういうわけか箱が分離されていないが互いに重なっていることです。

PageList DIVボックスのMy CSSは次のとおりです。

#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;
}

.

私は自分自身でそれを解決するためにしばらくの間私がそれを解決するために何度も試したので、いくつかの解決策を持っているか、または私を正しい方向に向けることができます。 clear：両方ともタグを使用することの問題でしたが、それは何もしませんでした。

誠実
- 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.