Search code examples
csspositioning

CSS: positioning an image on left of two lines of text

Like the title says I wan't to create a clickable list, in which each element contains an image on the left and two lines of text on the right.

Right now I've manage to implement the elements with the following code:

HTML: 

<div class="verticalListItem">
                <a href="#">
                    <div class="verticalItemImage"><img src="images/vdfLogo.png" width="80" height="80" /></div>

                    <div class="verticalItemText">

                        <p>Pop/Rock</p>
                        <p>0</p>
                    </div>
          </a>
</div>

CSS:

.verticalListItem  {
    border: 1px solid #333;
}

.verticalItemImage {
    float: left
}
.verticalItemImage img {
    display: block;       
}

The result I have now is this: enter image description here

However, my red image is not centered vertically and worst: the area bellow the image and the second label, so as the area above the first label (I've marked those areas with green on second element) is not clickable. What am I doing wrong here, can you help me please?

Thanks in advance!

Solution

  • here is the solution - http://jsfiddle.net/SaRnR/