CSS: Div boxes overlap each other and hide text. How to “clear” them?

StackOverflow https://stackoverflow.com/questions/5027151

  •  14-11-2019
  •  | 
  •  

Question

I have a small issue with my div boxes that I can’t seem to resolve.

I’m dynamically creating 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 box consists as shown of an image on the top, then the headline and a short summary of the post. Now, my problem is that the boxes overlap each other but just enough so the summary part is hidden beneath the image of the div box below it.

Okay, it might be a bit confusing but the point of the line is, that somehow the boxes isn’t separated but are overlapping each other.

My CSS for the pagelist div box is:

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

I hope some have a solution or can point me in the right direction because I've tried for some time now to solve it myself, without any luck. I though it was just a matter of using the clear:both tag, but it didn't do anything.

Sincere
- Mestika

Was it helpful?

Solution

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:

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top