divがchromeとsafariに正しく配置されていない

Question

私はこのページを持っています... http：//thornwoodfinehomes.com/whatsNew.php FirefoxとIE 7,8 & 9ではよく見えますが、SafariとGoogle Chromeではうまくいきません。

はここでHTML

<div class="contentAreaAvailable"> 
<div class="content"> 
<div class="contentText"> 
Some Text 
<img src="pics/whatsNew1.jpg" width="407" height="247" border="0" /> 
</div><!--contentText--> 

<div class="rightContent"> 
<img src="pics/whatsNew2.jpg" width="332" border="0" /> 
<br /><br /> 
<img src="pics/whatsNew3.jpg" width="332" border="0" /> 
</div><!--rightContent--> 

</div><!--content--> 
<div style="text-align:center; width:100%; float:left; padding-top:15px; font-size:26px;"> 
<stong><em>Coming soon, some exciting opportunities in Roseland Burlington.</em></stong> 
</div> 

</div><!--contentAreaAvailable--> 

されており、ここで私はそのはChromeとSafariでこれを行う理由はわかりませんCSS

.contentAreaAvailable{ 
    background:#000; 
    padding:50px; 
    border:1px solid #FFF; 
    width:912px; 
    height:730px; 
    float:left; 
} 

.content{ 
    padding-bottom:4px; 
} 

.contentAvailable{ 
    /*padding:20px 0 0 0;*/ 
    width:566px; 
    font-size:22px; 
    float:left; 
    padding-bottom:10px; 
    margin:10px 0 0 0; 
} 

.rightContentAvailable{ 
    float:right; 
} 

で、任意の助けいただければ幸いです。ありがとう

Answer 1

どのように幅を設定しているのかわかりませんが、左のdivと思われますcontentAvailableはちょっと大きすぎます。私が566pxから500pxにサイズを変更したとき、右のdiv rightContentAvailableがスライドし、レイアウトが正常に見えました。 （これはChromeにあります）

また、Chromeのデベロッパーツールを使用すると、レイアウトの問題をトラブルシューティングするのに適しています。