Выравнивание текста рядом с изображением вертикально

Question

Я пытаюсь создать блог с нуля, и у меня возникли проблемы с выравниванием текста рядом с верхней частью изображения. В настоящее время текст находится справа от изображения, однако он центрирован. Как выровнять текст вверху?

HTML

<img class="left" src="images/test.jpg" height="153" width="186" align="left"> 
<p class="right">bLAH BLAH BLAH</p> 
<div style="clear: both"></div> 

CSS

.left{ 
    display:inline-block; 
    clear:left; 
} 

.right{ 
    display:inline-block; 
    vertical-align: top; 
    clear:right; 
    } 

Answer 1

Попробуйте добавить это и дайте мне знать, если это поможет:

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

.right {float:left;margin-left:20px;} 

Answer 2

Текст выровнен по влево по умолчанию так, вам не понадобится align:left. Кроме того, FYI это text-align:left; Demo: http://jsfiddle.net/r2SWx/

<p class="left"><img src="images/test.jpg" height="153" width="186"></p><p class="right">bLAH BLAH BLAH</p> 
<div style="clear: both"></div>