CSS：2行のテキストの左に画像を配置する

Question

タイトルのように、クリック可能なリストを作成することはできませんが、各要素には画像が左側に、テキストの右側に2行含まれています。

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;  
} 

私が今持っている結果がこれです：

今私は、次のコードを持つ要素を実装するために管理してきました

ただし、私の赤いイメージはceではありません垂直および最悪の場合：画像と2番目のラベルに蛇行した領域があるため、最初のラベルの上の領域（2番目の要素に緑色の領域をマークしています）はクリックできません。私はここで間違って何をしています、私を助けてくれますか？

ありがとうございます！

Answer 1

は、ソリューションです - http://jsfiddle.net/SaRnR/

Answer 2

テストなしではわかりませんが、これはうまくいくはずです。ここ

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

.verticalListItem a { 
    overflow: auto; 
} 

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

.verticalItemText { 
    float: left; 
    display: block; 
    line-height: 40px; 
}