responsive 3 div side by side with image

Problem

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>
Problem courtesy of: Anu

Solution

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

.col > img {
    float: left;
}
Solution courtesy of: DRD

Discussion

DRD's aswer is good and You may also use align="left" inside img tag.

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

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

Discussion courtesy of: Aru

This recipe can be found in it's original form on Stack Over Flow.