フローティング div などを使用してレスポンシブ デザインを作成しようとしています。ヘッダーと画像スライダーの下に、メイン コンテンツの div があります。ここには 2 つの div があり、1 つは左に、もう 1 つは右に浮いています。右側の div には、1 つの列に 3 つの div があります。左の div には 4 つの div があり、すべて左に浮いており、次のように配置されます。
ここに私の問題があります-ブラウザの幅をリサイズすると、左のコンテナ div の下部の 2 つの div が次のように移動します。
clearfix を試してみましたが、問題が解決しないようで、行き詰まっています。
ここで私が間違っていたことを誰か教えてもらえますか - お願いします! ;o)
上記のスクリーンショットは、Chrome ブラウザーからのものです。他のブラウザ (Safari、Firefox、Opera) でも同じバグが常に発生します。ページのコンテンツよりも小さいサイズにサイズ変更するときだけではありません。
誰かがここで私を助けてくれることを願っています。ちょっとイライラする ;o( 以下に、私のコードがあります。ありがとうございます!
//ジェスパー
HTML: コンテンツ
<div id="content-wrap" class="centered">
<div id="fp-branding-area">
<!-- nivo slider here -->
</div>
<div id="content-main">
<div class="fp-box-main">
<img src="images/fp_box1.jpg" alt="Alttext1">
<h1 class="box-caption">Caption1</h1>
</div>
<div class="fp-box-main"><img src="images/fp_box2.jpg" alt="Alttext2">
<h1 class="box-caption">Caption2</h1>
</div>
<div class="fp-box-main"><img src="images/fp_box3.jpg" alt="Alttext3">
<h1 class="box-caption">Caption3</h1>
</div>
<div class="fp-box-main"><img src="images/fp_box4.jpg" alt="Alttext4">
<h1 class="box-caption">Caption4</h1>
</div>
</div> <!-- /end #content-main -->
<div id="content-side">
<div class="fp-box-side">
<img src="images/fp_box_side1.jpg" alt="Side Alttext1">
<h1 class="box-caption">SideCaption1</h1>
</div>
<div class="fp-box-side">
<img src="images/fp_box_side2.jpg" alt="Side Alttext2">
<h1 class="box-caption">SideCaption2</h1>
</div>
<div class="fp-box-side">
<img src="images/fp_box_side3.jpg" alt="Side Alttext3">
<h1 class="box-caption">SideCaption3</h1>
</div>
</div> <!-- /end #content-side -->
</div> <!-- /end #content-wrap -->
</div> <!-- /end #page -->
<footer id="footer-main">
<div id="footer-wrap" class="centered">
Content
</div>
</footer>
</body>
CSS:
h1, h2, h3, h4, hgroup {
font-family: Avenir;
font-size: 1.18em;
letter-spacing: .05em;
}
.centered {
position: relative;
margin: 0 auto;
}
.full-width {
width: 960px;
}
#page {
background: url(../images/gradient_page.png) repeat-x;
min-height: 100%;
width: 100%;
}
#header-main {
height: 137px;
background: url(../images/bg_header.jpg);
}
#header-wrap {
width: 960px;
}
#content-wrap {
background: url(../images/web-dropshadow_header.png) center top no-repeat;
width: 100%;
max-width: 960px;
overflow: auto;
padding-bottom: 136px;
/* must be same height as the footer */
}
#fp-branding-area {
width: 100%;
margin-top: 2.11361%;
background-color: #c6c6c6;
}
#content-main {
width: 78.85416666666667%;
/* ((757 / 960) * 100) */
float: left;
margin-bottom: 2.11361%;
}
#content-side {
width: 21.14583333333333%;
/* ((203 / 960) * 100) */
float: left;
}
.fp-box-main {
position: relative;
width: 47.88639%;
/* ((362.5 / 757) * 100) */
margin: 2.11361% 2.11361% 0 0;
float: left;
overflow: hidden;
clear: none;
}
.fp-box-main img, .fp-box-side img {
width: 100%;
margin-bottom: -3px;
}
.fp-box-side {
position: relative;
margin-top: 7.88177%;
width: 100%;
overflow: hidden;
clear: both;
}
.fp-box-side h1 {
font-size: .8em;
}
.box-caption {
background-color: black;
color: #FFF;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 90%;
padding: 5%;
bottom: 0;
}
#footer-main {
position: relative;
margin-top: -136px;
/* negative value of footer height */
height: 136px;
clear: both;
background-color: white;
}
#footer-wrap {
width: 960px;
}