右にテキストを追加している間にhtmlホバーを置く

Question

コードを左右に浮かべて、左から右に書いてみましたが、テキストやホバリングイメージのように同じ行には残りませんもう片方。私は何が間違っているのかちょっと混乱しています、あなたはおそらく私を助けることができますか？

JsFiddle：http://jsfiddle.net/W3Pxv/344/

<span class="right"><a href="http://discord.me/animalcrossingchat"><img src="http://i.imgur.com/1HcjGUB.png?1" onmouseover="this.src='http://i.imgur.com/Y3qUfNt.png?1'" onmouseout="this.src='http://i.imgur.com/1HcjGUB.png?1'" /></a></span><span class="left">Animal Crossing Community gives you an unlimited amount of possibilities. Do you want to share some unforgettable moments of your own animal crossing experience or just talk about anything noteworthy that comes to your mind on our plaza? Why don't you grab a cup of coffee and talk about more serious matters in the roost? Become a premium member and enjoy a variety of new features and much more. 

Be part of our community by earning bells, answering the question of the day or winning valuable prices on our server's contests. You are what you make yourself to be on Animal Crossing Community. Join today and become the newest member.</span> 

は、CSS：

.right { 
    float:right; 
} 

.left { 
    float:left; 
} 

Answer 1

は.leftにインラインブロックと固定幅の表示を与えます。

.left{ 
    width: 420px; // size is interchangable 
    display: inline-block; 
    float:left; 
} 

フィドル：右jfiddleでhttp://jsfiddle.net/W3Pxv/348/