テキストが上部に揃っていないのはなぜですか？

Question

私は右に浮かんでいるdivにテキストブロックを持っています。 divは上部に揃えますが、100pxほど下がっています。 http://174.121.46.122/~flowerwo/inside.html

私は絶対配置を試みましたが、私はバックグラウンドイメージを消してしまいました。テキストがどこにある必要があるのは明らかですが、適切に配置されません。ここで

はhtmlです：ここでは

<div id="small-box"> 
<div id="small-box-top"> 
<div id="small-box-bot"> 
<div id="text-box"> 
<h3><a href="#">Headline</a></h3> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
</div> 
<img class="small-box-photo" src="_images/flower-red.jpg" alt="flower" /> 
</div> 
</div> 
</div><!-- end small box --> 

はCSSです：

#small-box { 
    width: 625px; 
    position: relative; 
    margin: 10px 0 0 5px; 
    background: url(../_images/bg_small-box-mid.jpg) repeat-y; } 
#small-box-top   { width: 625px; background: url(../_images/bg_small-box-top.jpg) no-repeat center top; } 
#small-box-bot   { width: 625px; background: url(../_images/bg_small-box-bot.jpg) no-repeat left bottom; } 

img.small-box-photo  { width: 245px; height: 258px; margin: 20px 0 20px 20px; position: relative; } 
#text-box 

これが一番上に適切に整合するようになってすべてのヘルプは理解されるであろう。

  { width: 300px; float: right; margin: 0 30px 0 0; } 

Answer 1

#small-box-bot => display: table; 

img.small-box-photo => float: left; 

Answer 2

これは私にとってはうまくいきます。 this exampleをご覧ください。あなたが達成しようとしているように見えませんか？いいえの場合は、もっと多くの情報を提供し、問題を見ることができるオンライン版へのリンクを提供することをお勧めします。

オンラインの例の後の更新。

だから、あなたが与えた例では、クリアが起こっに問題がある：#r-box-lowerはclear: right

#r-box-lowerフローティング権利が含む、#small-boxと同じDOMレベルで座っクリア

1. は、奇妙にシフトされたテキストブロック
2. p.1とp.2のためによって#r-box-lowerが開始され、が開始されます。

   <div id="right-column" style="float: right; width: 192px"> 
       <div id="right-box"> 
        … 
       </div> 
       <div id="r-box-lower"> 
        … 
       </div> 
   </div> 
   

   はきっと、あなたのスタイルシートにそれらのインラインスタイルを移動したい：

だから、問題を解決するために、あなたは次のように共有のdivに #right-boxと r-box-lowerをラップする必要があります。