evghenii turco evghenii turco - 7 months ago 13
HTML Question

How to place p tag under image?

So i'm trying to place some text under an image but for some reason it stays on the right till the container ends and then goes under the image.
I want it to be fully under the image.

You can see "Over" near the right top corner of the image

And here is the code:



.post {
margin-top: 3px;
width: 80%;
font-size: 20px;
border-bottom: 1px solid #ddd;
}
.post h2 {
font-size: 20px;
cursor: pointer;
}
.post h2:hover {
color: #0099FF;
}
.post img {
display: block;
width: 95%;
height: auto;
float: left;
position: relative;
}
.post p {
display: block;
top: 7px;
font-size: 13px;
color: #999;
}
.rating {
display: inline-block;
}
.rate {
display: inline-block;
height: 34px;
width: 44px;
border: 1px solid #ddd;
border-radius: 3px;
text-align: center;
cursor: pointer;
line-height: 30px;
margin-bottom: 25px;
margin-left: 5px;
}
.rate:first-child {
margin-left: 0;
}
.rate:hover {
border: 1px solid #999;
}
.rate img {
position: relative;
top: 7px;
left: 12px;
width: 20px;
height: 20px;
}
.social {
display: inline-block;
height: 34px;
float: right;
}
.social a img {
display: inline-block;
height: 34px;
width: auto;
margin-right: 10px;
}

<div class="post">
<h2>I know I'm a douche for wearing sunglasses at night but...</h2>
<img src="http://img-9gag-fun.9cache.com/photo/a77Pzr2_700b.jpg" />
<div class="postfooter">
<p>Over 9000 points ยท 56 comments</p>
<div class="rating">
<div class="rate">
<img src="up.png">
</div>
<div class="rate">
<img src="down.png">
</div>
<div class="rate">
<img src="comment.png">
</div>
</div>
<div class="social">
<a href="#">
<img src="facebook.png">
</a>
<a href="#">
<img src="twitter.png">
</a>
<a href="#">
<img src="googleplus.png">
</a>
</div>
</div>





Also it looks alright in chrome for some reason and not alright in FF.

Answer

Add css for .postfooter

.postfooter {
    clear: both;
}

This will ensure it's on its own line.