Question

brain not working today…can’t seem to figure this one out. your help is much appreciated.

i have a very simple list of divs like this:

<div class="row">
  <div class="icon">some icon image here</div>
  <div class="message">some long content here</div>
</div>
<div class="row">
  <div class="icon">some icon image here</div>
  <div class="message">some long content here</div>
</div>

I want it to look like this:

IMG  text text text
     text text text

IMG  text text text
     text text text

with no text wrapping around the image, and the above content not overflowing to the next row (rows have background colors).

i don’t want to use a background-image image as i want the image to be clickable.

thanks!

Answer 1

See: http://jsfiddle.net/thirtydot/pFLEP/

.row {
    overflow: hidden; /* clear the floats */
    background: #ccc;
    margin: 0 0 8px 0 /* margin just for demo */
}
.icon {
    float: left
}
.icon img {
    display: block /* remove "space" under image. try commenting this out to see what I mean */
}
.message {
    margin: 0 0 0 74px
}