• ベストアンサー

width 100% で縦に３段のレイアウト

上から top, middle, bottom の３つの段があって、 横に１００％伸びるものを作ろうとしてます。 middle の中には width=700 で center 寄せの middle_inside があり、 さらにその中に section1 と section2 があります。 ややこしくて申し訳ないのですが、以下のようなコードでして グレーと黄色の背景を うまく表示させる方法ありますでしょうか？ IE6 では希望通りに表示されるのですが Firefox 2.0 では背景が真っ白になってしまいます。 <!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>[ css ]</title> <style type="text/css"> <!-- * { margin: 0; padding: 0; font-family: "Times New Roman", Times, serif; font-size: 24px; } #top { height: 100px; margin: 0 auto; background: blue; } #middle { margin: 0 auto; background: yellow; } #middle_inside { width: 700px; margin: 0 auto; background: gray; } #bottom { height: 100px; margin: 0 auto; background: red; clear: both; } #section01 { float: left; background: green; width: 300px; } #section02 { float: left; background: brown; width: 300px; } --> </style> </head> <body> <div id="top">top</div> <div id="middle"> <div id="middle_inside"> middle_inside <div id="section01"> section01<br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="section02"> section02<br><br><br><br><br><br><br><br><br><br><br><br> </div> </div><!-- #middle_inside --> </div><!-- #middle --> <div id="bottom">bottom</div> </body></html>

  • CSS
  • 回答数2
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

floatしているので高さが決まらないのでは？ 以下のようにして、floatをクリアしてあげてください <div id="section02"> section02<br><br><br><br><br><br><br><br><br><br><br><br> </div> <div style="clear:both"></div>

その他の回答 (1)

回答No.2

section01とsection02の背景にmiddleとmiddle_insideが見えないっ て話でしたら、見えない方が正解で、見えちゃうのはバグです。高 さが成り行きで中身が「middle_inside」の1語しかないので仕方が ありません。floatしているブロックは計算に入れない規則。 高さを指定するとか、section02の後で<br clear="all" />すると か、#middle_inside:after で見えないコンテンツを置くとか、でな けりゃoverflow属性を指定するとか、いろんなごまかし方がありま すので、好みのものをどうぞ。私は :afterで見えないスペースを置 くのが好きです。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • フロートをした場合の縦方向のマージンの指定方法

    下記のソースを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
  • 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
  • CSSでのレイアウトが崩れてしまうんです。

    お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }

  • <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
  • div入れ子による height100%

    お世話になります。 親要素のdivは縦100%になるのですが、 入れ子のdivが縦100%にならず困っております。 検証ブラウザは、IE6、IE7、FF2、Safariです。 お分かりの方、ご教授をお願いいたします。 ▼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>test</title> <style type="text/css"> <!-- html { height:100%; } body { height:100%; margin:0; padding:0; } #wrapper { background: #99CC00; width:500px; margin-left:auto; margin-right:auto; min-height:100%; } #wrapper-inner { background:#CCFF00; width:450px; margin-left:auto; margin-right:auto; min-height:100%; } #contents { background: #FFFFCC; width:400px; margin-left:auto; margin-right:auto; min-height:100%; } * html #wrapper { height: 100%; } * html #wrapper-left { height: 100%; } * html #wrapperA { height: 100%; } --> </style> </head> <body> <div id="wrapper"> <div id="wrapper-inner"> <div id="contents"> テスト <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> </div> </body> </html>

    • ベストアンサー
    • CSS
  • CSSでの背景色の指定について

    以下のソースで右下に空白ができます。 それはいいのですが、背景色を指定がうまく行きません。 heightは動的に変わるので、idやclassを増やさずに実現したいと考えています。 IEでは実現できてきますが、Firefoxではダメでした。 よい方法はないでしょうか？ ■test.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=euc-jp"> <link href="css/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="wrap"> <div id="left"> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> </div> <div id="right"> ああああ<br /> ああああ<br /> ああああ<br /> ああああ<br /> </div> </div> </body> </html> ■test.css body { margin-top: 20px; margin-left: 70px; margin-bottom: 0px; padding: 0px; line-height: 1.4em; font-size: 12px; font-weight: normal; color: #333333; } #wrap { width: 690px; background-color: #000000; } #left { margin: 0px; padding: 0px; width: 510px; height: 100%; float: left; background-color: #ffff00; } #right { margin: 0px; padding: 0px; width: 180px; float: right; background-color: #ff00ff; }

    • ベストアンサー
    • CSS
  • CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？

    初めて質問させていただきます。 当方はCSS初心者です。 画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。

  • ieとfirefoxでdiv枠に２pxのズレ

    宜しくお願い致します。 現在下記のHTMLを作成致しましたが、CSSにてfirefoxとchomeに合わせると ieではdiv枠が2px程左右にズレが生じてしまいます。ieに合わせると逆の現象が生じます。 何が原因なのか判りません。宜しくご教示下さい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <style type="text/css"> .clear {clear:both; } .clear hr {display:none;height:0px;font-size:0pt; } #wrap {width:810px; text-align:center; margin:0px auto;} #header{font-size:70%;color:green;margin-top:5px;text-align:center;} #menu {width:200px;height:auto; float:left;margin:0;position: relative;} #goods {width:600px;height:auto; float:right;margin:0;position: relative;} #top-title { width:200px;height:70px; float:left; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} #top-menu { width:600px;height:70px; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} /* position: relative削除したり widthの値を%にしたり色々試してみましたが??? */ .col_01_l{width:295px;height:310px;position: relative; float:left; margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_01_r{width:295px;height:310px;position: relative; float:right;margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_05 {width:200px;height:auto; float:left; margin-bottom: 8px;background-color:#ffffee; border:solid 1px #336600;} .col_06a {width:600px;height:auto; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #000000;position: relative;} </style> </head> <body> <div id="wrap"> <div id="header"> </div><!-- /header --> <div id="goods"> <div id="top-menu"> </div><!-- /top-menu --> <br style="clear:both;"> <div class="col_06a"> <br><br> </div> <br style="clear:both;"> <div class="col_01_l"> <p>ブラウザieではずれませんが、 chrome、firefoxで、この枠が 右に２pxにずれる。 どのように直せば良いか具体的にご教示下さい。</p> </div> <div class="col_01_r"> <br> </div> <br style="clear:both;"> </div><!-- /goods --> <!-- ################################################################################## --> <div id="menu"> <div id="top-title"> <br> </div> <br style="clear:both;"> <div class="col_05"> <br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br> </div><!-- /col_05 --> <br style="clear:both;"> </div><!-- /menu --> <br style="clear:both;"> <!-- ################################################################################## --> </div><!-- /wrap --> </body> </html>

    • ベストアンサー
    • CSS
  • CSSレイアウトについて

    cssによる3カラムを作っているのですがie6で見ると右のカラムが 落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試して みたのですがwidthとmarginの合計で1000px以内にしなければ ならないようなのですがその場合firefoxなどのブラウザで確認 すると若干ではありますが微妙に違いがでてきます。 下記のソースのように特に画像をいれなくてもbackgroundを設定 することによりカラム落ちはしなくなったのですがこの他に解決 方法はあるのでしょうか？ また、なぜbackgroundを設定することにより解決したのかも 全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ～略～

    • ベストアンサー
    • CSS
  • FireFoxで見るとdiv間に隙間が・・・

    divを３つ使い、CSSで指定した背景画像によって一つのボックスを作っています。 ＩＥ６で見たときは異常ないのですが、FireFoxで見ると、 それぞれ隙間が開いてしまい、背景画像が途切れて見えます。 同じような使い方をしている箇所にすべて同じ事が起きています。 Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか？ 直す方法があればご指導よろしくお願い致します＞＜ <div id="medi-top"> </div> <div id="media"> <p>何行かにわたり、画像や文章が入力されています</p> </div> <div id="medi-bottom"></div> #medi-top { background-image: url(img/media_01.jpg); background-repeat: no-repeat; height: 50px; width: 680px; margin-top: auto; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 0; } #media { width: 600px; background-image: url(img/media_03.jpg); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-right: 40px; padding-left: 40px; } #medi-bottom { background-image: url(img/media_05.jpg); background-repeat: no-repeat; height: 35px; width: 680px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto; } 本や検索などで同じようなものを探して対処してみたのですが、 直らなかったため質問させていただきます。 よろしくお願い致します。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する