responsive 3 div side by side with image

Question

How to align image and content inside div under div. tried with float left but not working

Js fiddle link for quick overview
here is the CSS:

.container {
   clear: both;
   padding: 0px;
   margin: 0px;
  overflow:hidden;
 }
.profile1 {
  background-color: #CCF;
 }
.profile2 {
 background-color: #CFC;
}
.profile3 {
 background-color: #FCC;
}
@media only screen and (min-width: 480px) {
 .span_1_of_3 {
  width: 32.2%;
}
.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}
.col:first-child {
 margin-left: 0;
}
}

HTML:

<div class="container" style="border:2px solid black;">
    <div class="col span_1_of_3 profile1"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
    <div class="col span_1_of_3 profile2"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
    <div class="col span_1_of_3 profile3"><img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet</div>
</div>

Answer 1

Floating image to the left seems to be working just fine: http://jsfiddle.net/rTZJ9/ .

.col > img {
    float: left;
}

Answer 2

DRD的aswer很好，您也可以在img标签中使用align="left" 。

<img src="http://placehold.it/100x100" align="left"/>

Answer 3

@Sharanpreet The align attribute of is not supported in HTML5. Use CSS instead.