- ベストアンサー
divをつかった2段組について教えてください。
vistachioの回答
- 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; }
関連するQ&A
- <div>でレイアウトすると上下に空白が出る
現在cssを独学で勉強中です。 どなたか解るか方、教えてください。 <div>の中にまた<div>でBOXをつくりcssでは"float"を使ってレイアウト しようとしています。 下記の内容でHTMLとcssを記述していますが、入れ子にした<div>要素の 上下に20pxくらいの空欄ができます。 これを出ないようにする方法はありますでしょうか？ というか、記述としては合っているのでしょうか？ 一応いろんなサイトを参考にして記述してはいます。 また、IEとfirefoxでは空欄の出方が違います。 たぶんIEのバグなんでしょうが、対処の方法も含めて教えていただけると ありがたいのですが... 空欄は"margin-top"を「-20px」とかにするとなくなるのですが 今度はSafariでその分要素自体が小さくなってしまいます。 宜しくお願いします。 ---HTML（一応DTDの部分から載せておきます）--------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" type="text/css" href="test3.css" /> <title></title> </head> <body> <div id="container"> <div id="boxA"> A（ヘッダ） </div> <div id="wrapper"> <div id="boxB"> B（メインカラム） </div> <div id="boxC"> C（サイドバー1） </div> </div> <div id="boxD"> D（サイドバー2） </div> <div id="boxE"> E（フッタ） </div> </div> </body> </html> --- css ----------------------- body { text-align:center; margin-top: 0px; } #container { width:800px; height: 800px; margin-top: 0px; margin-left:auto; margin-right:auto; text-align:left; background-color: #33FF66; } #boxA { width:100%; height: 150px; background-color: #9999CC; } #wrapper { width:620px; height: 200px; float:right; background-color: #33CC00; } #boxB { width:440px; height: 200px; float:left; background-color: #999933; } #boxC { width:180px; height: 200px; float:left; background-color: #FF9966; } #boxD { width:180px; height: 200px; float:right; background-color: #996699; } #boxE { width:100%; height: 150px; clear:right; background-color: #33CCCC; }
- ベストアンサー
- HTML
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
- floatをfooterに指定すると正しく表示ができない。
floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか？わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </div> </body> </html>
- ベストアンサー
- HTML
- XHTML1.1でposition:relative指定したdivの挙動
XHTML1.1で、widthとheightをpx指定したdiv（divA）の中に、position:relative;を指定したdiv（divB）を配置した場合、 divAよりdivBの幅が広くなると、divBの内容がdivAの外側にはみ出して表示されてしまいますよね。 これを回避する方法はないのでしょうか。 以下簡単ですがサンプルです。 ----- <!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"> <head> <style type="text/css"> #divA { width: 200px; height: 200px; border: 1px solid #000; overflow: scroll; } .divB { position:relative; } </style> </head> <body> <div id="divA"> <div class="divB"> ************************************************************************************************************<br /> </div> </div> </body> </html>
- ベストアンサー
- CSS
- CSSでFirefoxのプレビューをかけると、下が空いてしまう現象（追記）
先ほど、質問させて頂きました問題に関しまして、簡単なレイアウトで再度新規にページを作成してみたところ、どうも、PCの縦幅よりも小さい値のページは、下が空いてしまうのではないかという気がしました。 レイアウトの構成は １．上部に「header」コンテナ ２．その下に「wrapper」コンテナ ３．その下（最下部）に「footer」コンテナ という構成で作成したところ、２．の縦幅が300pixのときは、このような現象が起こるが、２．の縦幅が800pixのときは起こりませんでした。 ソースコードは以下の通りです ■ html部分 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> id "header" の内容がここに入ります</div> <div id="wrapper"> id "wrapper" の内容がここに入ります-</div> <div id="footer"> id "footer" の内容がここに入ります</div> </body> </html> ■ CSS部分 body { margin: 0px auto; padding: 0px; } #header { margin: 0px auto; padding: 0px; height: 50px; width: 800px; background: #666666; } #wrapper { margin: 0px auto; padding: 0px; height: 300px; width: 800px; background: #FFFF00; } #footer { margin: 0px auto 5px; padding: 0px; height: 60px; width: 800px; background: #00FFFF; } です。 もし、予想通りPCの縦幅の問題だとしたら、 １．コンテンツの少ないページはどのように対処するのか？ ２．PCによって縦幅が異なるが、大きな画面サイズのＰＣでは、小さな画面サイズのＰＣで正しく表示されるものも、このように下が空いてしまうのか？ ３．これまでの推測は間違えで、別の考え方から、エラーになるのか？ をご教授いただけますと幸いで御座います。 月曜日の朝から、くだらない質問かもしれませんが、宜しくお願いします。
- ベストアンサー
- HTML
- フロートをした場合の縦方向のマージンの指定方法
下記のソースをIEとFFで表示した場合に違いが出てしまいます。 希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。 なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？ また、この現象の原因を教えてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!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> <meta http equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。
- ベストアンサー
- HTML
- 補足・修正・訂正あればお願い致します。
windowsのIE9ではきれいに表示することができました。 しかし、横幅やマージン、パディングの箇所の数値がいまいち 理解できていないため完璧にできたという実感がありません。 もっと論理的にきれいな値をプログラムできると思っています。 私のプログラムで補足・修正・訂正あればお願い致します。 ＊＊＊＊＊＊＊＊＊＊＊＊index.html＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/base.css" > </head> <body> <div id="page"> <div id="header"> <p>header</p> <!-- /#header--></div> <div id="contents"> <!--メインコンテンツ（商品リスト）--> <div id="main"> <div class="products"> 商品1 </div> <div class="products"> 商品2 </div> <div class="products"> 商品3 </div> <div class="products"> 商品4 </div> <div class="products"> 商品1 </div> <div class="products"> 商品2 </div> <div class="products"> 商品3 </div> <div class="products"> 商品4 </div> <!-- /#main--></div> <!--メインコンテンツ（商品リスト）--> <div id="sub"> <p>sub</p> <!-- /#sub--></div> <!-- /#contents--></div> <div id="footer"> <p>footer</p> <!-- /#footer--></div> <!--/#page --></div> </body> </html> ******************base.css***************************** /* CSS Document */ body{ text-align:center; } #page{ width:860px; height:600px; margin:0 auto; background:#690; text-align:left; } #header{ width:860px; height:100px; background:#D1D1DE } #contents{ float:left; width:840px; height:380px; margin:10px; padding-left:0; background:#690; } *html #main{ width:560px; } #main{ float:right; width:570px; height:380px; background:#fff; } #sub{ float:left; width:260px; height:380px; background:#fff; } #footer{ width:860px; height:100px; clear:both; background:#fff; background:#D1D1DE } .products{ float:left; width:130px; margin-left:10px; margin:10px 0px 10px 10px; height:170px; background:#F3F59C }
- 締切済み
- CSS
- safariで見るとページ上部に余白ができてしまう
以下のhtmlとcssをChromeで見るとページ（サイト）上部に余白がないのですが、Safariで見ると余白ができてしまいます。どうやったら上部（と下部）の余白がどのブラウザでも表示されないようになりますでしょうか？初歩的な質問で申し訳ありませんがネットで検索してもわからなかったので、宜しくお願いいたします。 [html] <?xml version="1.0" encoding="UTF-8"?> <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="index.css" /> <title></title> </head> <body> <div id="wrap"> <div id="inner"> <div id="header"> <img src="image_basic/logo.png" width="450" height="140" alt="veggietimeslogo" /> <img src="image_basic/slide.jpg" width="920" height="450" alt="slide2" /> </div><!-- /header --> <div id="mainwrap"> <div id="firstwrap"> <p>ここは一段目<br />ここは一段目<br />ここは一段目</p> </div><!-- /firstwrap --> <div id="middlewrap"> <p>ここは二段目<br />ここは二段目<br />ここは二段目</p> </div><!-- /middlewrap --> <div class="clear"><hr /> </div><!-- /clear --> </div><!-- /mainwrap --> <div id="sidewrap"> <p>ここはサイドバー<br />ここはサイドバー<br />ここはサイドバー</p> </div><!-- /sidewrap --> <div class="clear"><hr /> </div><!-- /clear --> <div id="footer"> </div><!-- /footer --> </div><!-- /inner --> </div><!-- /wrap --> </body> </html> [css] @charset "UTF-8"; /* CSS Document */ body{ background-color:#000000; text-align:center; margin:0;} #wrap{ background-color:#ffffff; margin:0 auto; width:960px; text-align:left;} #inner{ margin:0 20px;} #mainwrap{ float:left; width:610px;} #firstwrap{ float:left; width:300px;} #middlewrap{ float:right; width:290px;} #sidewrap{ float:right; width:290px;} .clear{ clear:both;} .clear hr{ display:none;} p { font-family:Tahoma, Geneva, sans-serif}
- 締切済み
- ホームページ作成ソフト
- xhtml+cssのfloatの使い方、センタリングの方法
xhtml+cssでのプログラミングについて教えてください！ 初めてxhtml+cssでのプログラミングに挑戦しています。 質問したい内容が２つあります。 1.) ページ全体をセンタリング表示したいです。 (下記ソースのままだと左寄せに表示されてしまいます。) 2.) floatして右側に表示しているボックスの中に さらにfloatさせてleft、lightの２つ横並びのボックスを 配置することは可能でしょうか？ また、その際の注意点などはございますでしょうか？ --------------------------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> </head> <style type="text/css"> <!-- body{ margin: 0px; padding: 0px; background-color:#74CAEB; } #wrap { width: 800px; margin-right: auto; margin-left: auto; } #header { width: 800px; height: 80px; background-color:#E1F3FB; } #side { float: left; width: 200px; height: 200px; background-color:#14729A; } #main { float: right; width: 600px; background-color:#ffffff; } #main .conte1 { margin-top: 20px; width: 600px; height: 100px; background-color:#EFEFEF; } #main .conte2 { float: left; margin-top: 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #main .conte3 { float: right; margin: 20px 0px 0px 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #footer { clear: both; width: 800px; height: 80px; background-color:#E1F3FB; } --> </style> <body> <div id="wrap"> <div id="header"> </div> <div id="side"> </div> <div id="main"> <div class="conte1"> </div> <div class="conte2"> </div> <div class="conte3"> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- 質問のどちらかでも結構です。 初心者のため質問の仕方が悪く、ご理解が難しいかもしれませんが どなたかご理解頂ける方は教えてください。
- 締切済み
- HTML
- xhtml+cssのレイアウト センタリング カラム落ち
xhtml+cssレイアウト超初心者です。 何か間違っている所があれば教えてください。 よろしくお願い致します。 【問題点】 １）全体がセンタリングにならない □□■■■■■□□ □□■■■■■□□ □□■■■■■□□(左右の中央にしたい) ２）subがカラム落ちしてしまっている？ mainとsubの下に『スト』という文字が入ってしまっています。 【cssソース】 @charset "Shift_JIS"; * {margin: 0; padding: 0; } body {color: #000000; font-size: 62.5%; } /*==wrapper==*/ div#wrapper { width: 950px; margin : 0 auto; } /*==heaber==*/ div#heaber { width: 950px; margin-bottom: 30px; background-color: #66CCFF; } /*==contents ==*/ div#contents { width: 950px; float: left; background-color:#66CCFF; } /*==main ==*/ div#main { width: 740px; margin-right: 20px; float: left; background-color:#6699FF; } /*==sub ==*/ div#sub { width: 190px; float: left; background-color:#6666FF; } /*==siteinfo ==*/ div#siteinfo { clear: both; width: 950px; background-color:#6633FF; } 【HTMLソース】 <?xml version="1.0" encoding="Shift_JIS"?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" media="tv, screen, projection, print" href="css/import.css" /> </head> <body> <div id="wrapper"> <div id="header"> <p>テキスト</p> <p>テキスト</p> </div><!--/header--> <div id="contents"> <div id="main"> <p>テキスト</p> <p>テキスト</p> </div><!--/main--> <div id="sub"> <p>テキスト</p> <p>テキスト</p> </div><!--/sub--> </div><!--/contents--> <div id="siteinfo"> <p>テキスト</p> <p>テキスト</p> </div><!--/siteinfo--> </div><!--/wrapper--> </body> </html>
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。 が、ページが崩れてしまいました。