All geek questions in one place

CSS: Div fields overlap and hide text. How to "clean them"?

I have a little problem with my div blocks, which I think cannot solve.

Im dynamically creates these div boxes:

<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>

Each div block consists of an image above, then a heading and a short summary of the message. Now my problem is that the boxes overlap each other, but enough that the final part is hidden under the image of the div window below it.

Well, this can be a little confusing, but the point of the line is that the boxes are not divided, but overlap with each other.

My CSS for the pagelist div field:

#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: both, .


-

+3
2

clearfix. - :

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


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

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

. :

+2

, <div> - .

.

+3

Source: https://habr.com/ru/post/1792750/

More articles:


All Articles