- ベストアンサー
CSSでの段組の組合せについて
- CSSを使用して#header、#container、#footerを縦方向に配置し、#container内を左右に2段に分ける方法についての質問です。#content1と#content2は縦に並び、それぞれの左右の幅を変え、#box1と#box2、#box3と#box4を左右に並べます。
- 現在Dreamweaver8を使用していて、#header、#container、#footerを縦方向に配置し、#container内を左右に2段に分けたいです。しかし、#content1と#content2の設定がうまく効かず、表示がおかしくなっています。解決方法を教えてください。
- CSSで段組を作成する際に注意すべきポイントについて質問です。納期が迫っており、困っています。
- nikita16
- お礼率48% (83/172)
- その他（プログラミング・開発）
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- ygyo0078
- ベストアンサー率66% (8/12)
- ygyo0078
- ベストアンサー率66% (8/12)
（続き） HTMLソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="main.css" media="all"> <title>テスト</title> </head> <body> <div id="header"><p>header</p></div> <div id="container"> <div id="content1"> <div id="box1"><p>box1 <br><br><br><br><br></p></div> <div id="box2"><p>box2 <br><br><br><br><br></p></div> <div class="clear"> </div> </div> <div id="content1"> <div id="box3"><p>box3 <br><br><br><br><br></p></div> <div id="box4"><p>box4 <br><br><br><br><br></p></div> <div class="clear"> </div> </div> </div> <div id="footer"><p>footer</p></div> </body> </html> floatを適用させたdivのすぐ後に、clear:bothを適用したdivを入れています。 box1とbox2の下で一回clear:both。box3とbox4の下で一回clear:both。 content1とcontent2に関しては、footerにclear:bothを適用させて、回り込みを解除させています。 回り込みをさせた後はclearを適用させれば、大体の問題が解決すると思います。
お礼
すごく早いお返事ありがとうございます！ そしてＣＳＳもＨＴＭＬまで組んでいただいて感謝です！ 実は私の説明が悪く、結果が違っていたのですが（#content1と#content2は上下に並ぶ）、widthを変更するときれいに狙い通りになりました！ あとは、paddingやらmarginを入れて見目良くしていきます。 でもすごいですね(^^)どうしたらygyo0078さんのようにＣＳＳに精通できるのでしょう？ float:leftが大活躍ですね。なぜ上下の配置でleftなのか・・・解せない・・・けど考えないようにします。 ありがとうございました。 ちなみに、ＣＳＳのお勧め本があれば教えてください。
- nikita9
- ベストアンサー率0% (0/1)
お礼
ほんとにありがとうございます。 ＣＳＳって奥が深いですね・・・ ご紹介の本、手に入れて勉強してみます！