レスポンスレイアウトでディビジョンが重複しないようにする

Question

レスポンシブなレイアウトでオーバーラップしている2つのサイドバイサイドdivを防止しようとしています。

body{margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;} 
.mainContainer{float:left; height:auto; width:100%; max-width:800px; } 
.image{float:left; margin-top:0px; width:14.25%; height:auto;} 
.storyWrapper{float:left; width:85.75%; height:auto; min-height:64px; background-color:#f6f6f6; color:#000000;transition:0.2s; } 
.storyWrapper:hover{background-color:#c0c0c0; color:#ffffff;} 
.headline{text-align:left; padding:6px 6px 6px 6px; font-size:11pt; font-weight:bold; font-family:Arial; text-decoration:none;} 

このページへのリンクは次のとおりです：ここで

<div class="image"><img src="images/misc/libertyXSmall.jpg"/></div> 
    <div class="storyWrapper"> 
    <div class="headline">THIS IS A TEST HEADLINE TO SEE HOW EVERYTHING 
    WORKS ON THIS NEWS LIST PAGE!</div> 
    </div> 

がCSSです：

は、ここに私のhtmlであるあなたが見ることができるように、私の問題はhttp://www.rebelplanetnews.com/newsMenu3.html

..です右側のテキストdivは、ページのサイズ変更（小さい方）のときに画像divと左に重なります。私はそれを防ぐ必要があります。

Answer 1

答えは、見出しにパーセントを使用しないことです。最も簡単な解決策は、最新のすべてのブラウザで使用できるcalcの値を使用することです。ここで

div.storyWrapper { 
    width: calc(100% - 114px); 
    float: right; 
} 

が、私は画像の幅が114pxであることを指摘している、と100％のマイナスそれにコンテナの幅を設定します。

次のように動作します。

私はまた、コンテナを右側に浮かべました。

calcは少し難解です。特に、-演算子の周囲にスペースが必要です。calc(100%-114px)は、少なくとも一部のブラウザでは動作しません。

Answer 2

問題は、実際の画像が.image divが縮小されていないことです。そのため、画像のdivは幅のパーセンテージに応じて調整されますが、その中に含まれる画像は調整されません。 width：100％をimg要素に追加すると、画像はdivコンテナとともに縮小され、テキストdivは重複しません。