ここから本文です

【CSS】 左右 2段組カラムがあり、その右側に4段組の箱のfloat解除について教えて...

mik********さん

2012/5/2621:55:14

【CSS】 左右 2段組カラムがあり、その右側に4段組の箱のfloat解除について教えてください。(画像参照)

簡単にいえば、右のmainの中にさらに箱(div id)を作り4段組を実施したいだけのです。ところが、3番目の#dougaの部分でclear: both;を入れても解除が上手くいかないようなのです。で、自分なりに調べて形は出来解決したのですが、やはりclearが利用出来るのであればしたほうが良いのかと思い質問いたします。(下記は抜粋です。) よろしくお願いいたします。

#web・dtp {
width:390px;
height:350px;
float:left;
}

#gazou {
width:390px;
height:350px;
float:right;
}

#douga {
width:390px;
height:350px;
clear: both;
}
#dtm {
width:390px;
height:350px;
position: absolute;
left: 817px;
top: 770px;
}

div id,float,動画,width,div&gt,height,div class

閲覧数:
291
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

mar********さん

編集あり2012/5/2708:57:01

上段と下段に分けたらいかがですか。
<style type="text/css"><!--
body {
margin: 0px;
padding: 0px;
color: #000000;
background-color: #ffffff;
}
#main { /* 右側全体 */
width:780px;
background-color:#ffccff;
}
div.contents_box {
width:780px;
margin:0px auto;
}
#web_dtp {
width:390px;
height:350px;
float:left;
background-color:#cccccc;
}
#gazou {
width:390px;
height:350px;
float:right;
background-color:#ccffcc;
}
#douga {
width:390px;
height:350px;
float:left;
background-color:#ffcccc;
}
#dtm {
width:390px;
height:350px;
float:right;
background-color:#ccccff;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; }
*:first-child+html .clearfix { zoom: 1; }
--></style>

<div id="main">
<div class="contents_box clearfix"><!-- 上段 -->
<div id="web_dtp">1</div>
<div id="gazou">2</div>
</div><!-- end .contents_box -->

<div class="contents_box clearfix"><!-- 下段 -->
<div id="douga">3</div>
<div id="dtm">4</div>
</div><!-- end .contents_box -->
</div><!-- end #main -->

上段と下段に分けたらいかがですか。
&lt;style...

質問した人からのコメント

2012/5/27 16:29:17

回答ありがとうございます。やはり、クリア専用の設定をしなければ駄目だったんですね。
ただ、visibility: hidden;を使用すると他の枠の箱まで隠してしまうようなので、使用しない形と相成りましたが、とても参考になりました。ありがとうございました。

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる