html - Can't align picture and text beneath each other -


i've been trying ridiculously basic task can't through. cannot figure how make second image right below first one. frustrating!!

fiddle here: http://jsfiddle.net/dvir0776/v9v512tm/

<div class="comment"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;">     <div style="text-align:left; font-size:8pt;">     <h5 style="margin-bottom:0;">chris fanelli</h5>     comment comment comment comment comment comment comment comment comment comment!</div> </div>  <div class="comment"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;">     <div style="text-align:left; font-size:8pt;">     <h5 style="margin-bottom:0;">chris fanelli</h5>     comment comment comment comment comment comment comment comment comment comment!</div> </div> 

any tweak fix great.

line boxes wraps floated elements. should clear float @ end of container, .comment.

either traditional way:

<div class="comment">     <img src="d.jpg" style="width:13%; margin-right: 12px; float:left;" />     <!-- ... -->     <div class="clearfix"></div> </div> 
.clearfix { clear: both; } 

or something newer:

.comment:after {     content: "";     display: block;     clear:both; } 

Comments

Popular posts from this blog

php - Submit Form Data without Reloading page -

linux - Rails running on virtual machine in Windows -

php - $params->set Array between square bracket -