evghenii turco evghenii turco - 7 months ago 9
HTML Question

Place p under the image, right now it's partly on the right

so i'm trying to place text under the 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.