[Помогите] Верстка из psd как правильно сверстать лого и текст вокруг него?

http://pixs.ru/showimage/primerjpg_4486683_22681031.jpg

Всем привет! Помогите новичку в этом не легком деле
Вобщем шапка сайта. Как правильно реализовать так, чтобы логотип был слево, а текст обтекал его с правой стороны, но также у него float был left.
Притом, что текст должен быть разного стиля.

Как единым изображением вставить флоат лево, это я знаю. Но мне хочется, чтобы можно было редактировать после текст, через html, а не через фотошоп.

 

<div id="shapka">
<div id="logo"><a href=""><img src=""></a></div>
<div id="text"><span style="">text_1</span><br /><br /><span style="">text_2</span></div>
</div>
Или таблицей.

 

<div id="shapka"> - Не надо так делать для шапки сайта, для этого есть header и присваивать id тоже не есть гуд, если есть необходимость, то лучше воспользоваться классами.

 

HTML:

<div class="futures">
<a href="#" title="Logotype"><img src="/img/logo.png"></a>
<span class="futures_text1">Text1</span><br>
<span class="futures_text2">Text2</span>
</div>

 

HTML:

<style>
    .logo{float:left;}
    .logo_text{float:left;}
</style>
<div class="logo">
    <a href="#" title="logo_link"><img src="http://wmasteru.org/styles/baisik/xenforo/log.png"></a>
</div>
<div class="logo_text">
    <span class="top_text">Logotip-logotip</span><br>
    креатив креатив креатив
</div>

если правильно всё понял