CSSの流体要素が互いにぶつかり合っています

Question

私は自分のCSSに問題があり、私はstackoverflowに投稿するつもりでしたが、これは厳密にCSSの問題を見て投稿するのに適しているかもしれないと思いました。私はjqueryサイクルのプラグインを使用して画像を回転させ、回転子の右側にテキストのブロックを入れたいのですが、回転子に動かないようにしたいと思います。理由の中で収縮している。今すぐブラウザウィンドウを左に引っ張ると回転子の下にスライドするだけで、回転子は左に移動してもはやそれができなくなるまで、テキストはさらに拡大し始めるはずです。しかし私はそれを把握するように思わない。ここ

はhttp://falconesuits.com/ hdereが役立つかもしれないCSS（よく、少なくとも重要な部分）

#story2 { 
margin: 100px; 
width:300px; 
float:right; 
color:#FFF; 
} 
.slideshow { 
    width:300px; 
    height:450px; 
    background: #cc9966; /* for non-css3 browsers */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cc9966)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #fff, #cc9966); /* for firefox 3.6+ */ 
    min-height: 100%; 
    border:10px; 
    border-style:groove; 
    border-color:#939598; 
    margin-left: auto; 
    margin-right: auto; 
    top: 100px; 
} 

Answer 1

一つのアプローチは同じdiv容器の中にあなたの物語やスライドショーを置くことによって、あなたのhtmlを再構築することであるサイトです：それは代わりに、流体マージンを持つように

<div id="content"> 
    <div id="story2">...</div> 
    <div class="slideshow">...</div> 
</div> 

はその後#contentスタイリング。下向きのテキストを拡大するよう

#content { 
    overflow: hidden; 
    margin: 0 auto; 
    width: 650px; 
    margin-top: 100px; 
} 

#story2 { 
    width: 300px; 
    float: right; 
    color: #fff; 
} 

.slideshow { 
    float: left; 
    width:300px; 
    height:450px; 
    background: #cc9966; /* for non-css3 browsers */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cc9966)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #fff, #cc9966); /* for firefox 3.6+ */ 
    min-height: 100%; 
    border:10px; 
    border-style:groove; 
    border-color:#939598; 
} 

は、あなたの代わりに固定ピクセル値の割合にご#story幅を設定してみてください可能性があり、私は推測します。