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
Post a Comment