- ベストアンサー
divをつかった2段組について教えてください。
すみませんが、思うように段組ができないので、教えてください。 divを使って、次のようなレイアウトを実現させようとしています。 「メインとサブからなる2段組で、メインは幅400px以上、サブは幅200px固定、スクリーンにあわせてメインは大きくなる」(このサイトのようなレイアウトです。) メインを固定でならできるのですが、スクリーンの大きさに合わせる方法が分かりません。 たたき台のコードを添付します。どこを直せばよいのか、教えていただけると幸いです。 -------------------------------------------html------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="/style.css" type="text/css"> </head> <body> <div id="header"> ヘッダ </div> <div id="box"> <div id="boxMain"> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </div> <div id="boxSub"> ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> </div> <div id="footer"> フッタ </div> </body> </html> ------------------------------css-------------------- div#header { width: 600px; } div#box { } div#boxMain { float: left; margin: 0px; } div#boxSub { width: 200px; float: right; } div#footer { clear: both; width: 100%; }
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
連続投稿失礼します。 ちょっと下のはHTMLがおかしいので修正。以下正しいHTML。 <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>段組テスト</title> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <link rel="stylesheet" href="./style.css" type="text/css" /> </head> <body> <div id="container"> <div id="box"> <div id="header">ヘッダ</div> <div id="boxMain"> <div id="boxMainContent"> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </div> </div> <div id="boxSub"> うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> <div id="footer">フッタ</div> </div> </div> </body> </html>
その他の回答 (5)
- Rusica
- ベストアンサー率62% (10/16)
あ、なるほど。ちょっと質問の意図をこちらが理解しきれていなかった ようです。ごめんなさい。 これでいかがでしょうか？ 以下HTML。前回のものと比べるとdivの入れ子が深くなってます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <head> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div id="container"> <div id="box"> <div id="header">ヘッダ</div> <div id="boxMain"> <div id="boxMainContent"> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </div> </div> <div id="boxSub"> うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> <div id="footer">フッタ</div> </div> </div> </body> </html> 以下CSS。 *{ margin:0; padding:0; } div#container{ position:relative; width:100%; min-width:600px; } * html #container { border-right: 600px solid #dddddd; } * html #box { float:left; display:inline-block; position:relative; margin-right:-600px; } div#header { width:auto; background-color:#00C0C0 } div#boxMain { width:100%; float: left; background-color:#c0c0c0; margin-right:-200px; } div#boxMainContent{ margin-right:200px; } div#boxSub { width:200px; float:left; background-color:#C0C000; } div#footer { width:100%; clear:left; background-color:#C00000; } これで多分平気なはず。背景色は分かりやすいようにつけただけなので、 適当に消してしまって構いません。 個人的にはdivが入れ子になりすぎていて、こういうHTMLは好きじゃない です。しかもCSSハック使ってますし。まぁIE6ではCSSプロパティのmin- widthに対応していないので仕方ないですね。IEを無視すればもっと シンプルになります。
- vistachio
- ベストアンサー率57% (4/7)
これでどう？ boxSubとboxMainの間に10px間が開くけど div#box { width:100%; float:left; } div#boxMain { width:100%; margin-right:210px; } div#boxSub { float:left; width:200px; margin-left:-200px; }
お礼
ご回答ありがとうございます。 が、ページが崩れてしまいました。
- Rusica
- ベストアンサー率62% (10/16)
もとのHTMLを極力生かすためにちょっとトリッキーなやり方してます。 HTMLは若干変わってます。 ○HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div id="box"> <div id="header">ヘッダ</div> <div id="boxMain"> <div id="boxMainContent"> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </div> </div> <div id="boxSub"> うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> <div id="footer"> フッタ </div> </div> </body> </html> ○CSS div#box{ width:100%; } div#header { width:auto; background-color:#00C0C0 } div#boxMain { width:100%; float: left; margin-right:-200px; } div#boxMainContent{ margin-right:200px; } div#boxSub { width:200px; float:left; } div#footer { width:100%; clear:left; } boxMainにする予定だった背景の指定なんかはboxMainContentにして下さい。 ご希望に添えてなかったらゴメンナサイ。
お礼
ご回答ありがとうございます。 試してみましたが、ウインドウを小さくしていくと、やはりメインの幅が400pxよりも小さくなってしまいます。 (FFではメインがサブの下に下がる症状はなくなりました） いろいろ検索してみたのですが、段組を説明しているサイトのサンプルでは、やはり、メインの幅400px以上を満たすものは見つかりませんでした。 また、このサイト http://q.hatena.ne.jp/1163809756 のソースをみたところ、divを使って実現させているようです。 あと、「極力元のhtmlを活かすめ」とのことですが、 全く新規で結構ですので、実現方法が分かれば教えてください。
boxMainにmargin-right:200pxを入れてboxMainに400px幅の透明又は背景と同色の画像を仕込むか見だしが有るなら見出しを400pxにしたらいかがでしょうか。 <div id="box"> <div id="boxSub" style="width:200px;float:right"> ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> <div id="boxMain" style="margin-right:200px;"> <img src="./minwidth.gif" width="400" height="1" alt="minwidth"> <h1 style="width:400px">見だし</h1> <p> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </p> </div> </div> <div id="footer"> フッタ </div> </body>
お礼
ご回答ありがとうございます。 FFでの文字の回りこみはなくなったのですが(1歩前進です。)、 依然、ウインドウの幅を小さくすると、メインが下に落ちてしまいます。 コードは以下の通りです。 <div id="box"> <div id="boxSub"> ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> <div id="boxMain"> <img src="./minwidth.gif" width="400px" height="10px"> <h1 style="width:400px">見だし</h1> <p> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </p> </div> <div class="clear">a</div> </div> div#box { } div#boxMain { margin: 0px 200px 0px 0px; } div#boxSub { float: right; width: 200px; margin-left: auto; } div.clear { width: 600px; clear: both; }
- motohri
- ベストアンサー率50% (15/30)
こんなときは main 側の float 属性をはずし、 sub を main より前に書けばうまくいきます。 具体的には次のように変更すればＯＫです。 -----htmlの変更箇所----- <div id="box"> <div id="boxSub"> Sub の方を Main より前に書くように修正します。 </div> <div id="boxMain"> 後に Main を書けば隙間に配置されるのを利用しています。 </div> </div> -----cssの変更箇所----- div#boxMain { /* float: left; *//* float ははずしました */ margin: 0px; }
お礼
ご回答ありがとうございます。 早速試してみたところ、ウィンドウの大きさに追従するようになりました！！ が、メインの幅が400px以上という条件が満足できません。 ウィンドウの幅を小さくしていくと、 IEだとメインの幅がどんどん小さくなり、最終的にはサブの下に下がってしまいます。 FFだとさらに、メインの幅が小さくなる際に、あふれた”い”の文字がサブの下に回りこんでいってしまいます。 min-widthとか試してみましたが、うまくいきませんでした。 すみませんが、対象方法をご存知でしたら、お教えください。
お礼
ご回答ありがとうございます。 FFでは完璧です！！ IEの方は、なぜかレイアウトが崩れてしまいました。 やはり、min-widthが鬼門みたいです。 いろいろ、自分なりに調べてみたのですが、 http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html の内容が再現できません。私の方がおかしいのでしょうか？ ちなみに、IEのバージョンは6.0.29です。 すみませんが、ご教授の程、よろしくお願いいたします。
補足
自力で解決できました。 大変参考になりました。 ありがとうございます。