Question

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:

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!

Answer 1

here is the solution – http://jsfiddle.net/SaRnR/