Wie p-Tag unter Bild platzieren?

Question

Also ich versuche, etwas Text unter einem Bild zu platzieren, aber aus irgendeinem Grund bleibt es auf der rechten Seite, bis der Container endet und dann unter das Bild geht. Ich möchte es vollständig unter dem Bild sein.

Und hier ist der 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>

Auch sieht es in Chrom aus irgendeinem Grunde in Ordnung und in FF nicht in Ordnung.

Answer 1

Add CSS für .postfooter

.postfooter { 
    clear: both; 
} 

Dadurch wird sichergestellt, es auf seine eigene Linie ist.