イメージとテキストを2列で整列させると、2つのカラムが正しく動作しない

Question

<img id="story_image" src="images/builder_story_side.png" alt="photo"/> 

<div id="story_right"> 
<h2 class="story_header">fdgdfgdfgdfgdfgfdgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg</h2> 
<p class="small_story">fdgdfgdfgdfgdfgfdgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg</p> 
</div> 



img#story_image{float:left;} 

div#story_right{float:left;} 

私は前に2つのカラムを実行しましたが、何らかの理由で今回は動作しません。画像を第1列に、テキストを第2列に入れます。ストーリー_イメージがブロックであるかのように、ストーリー_ライトがイメージの下で終わる。

Answer 1

要素を適切に浮動させるには、浮動させる要素の幅を設定する必要があります。ピクセルとダイナミックパーセンテージの両方の幅を使用できます。これはあなたに問題を与えている理由は、divのデフォルトの幅が100％なので、画像をその横に浮かべることができないからです。

Answer 2

幅の設定が可能です。

CSS

#story_image{width: 50%;float:left;} 
#story_right{width: 50%;float:left;} 

例

http://jsfiddle.net/loktar/nnU26/1/