- ベストアンサー
floatを使用したレイアウトでbody全体を中央寄せするには？
floatを使用したレイアウト(下記)で、body全体の中央寄せを実現するには、CSSでどのように記述すれば良いのでしょうか？ <body> <div> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> DIV#left { width: 10px;float:left;background:red;} DIV#center { width:300px;float:left;background:green;} DIV#right { width: 10px;float:left;background:blue;}
- glory123
- お礼率64% (9/14)
- CSS
- 回答数9
- ありがとう数9
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
No.6です。（スレッドになってないので使いにくいな） DOCTYPE宣言の前に何らかの文字が入っていると、後方互換モードになってしまいます（IEのバグです） http://kikky.net/pc/css_bug002.html 私への回答に貼ってあった貴方のコード（xml宣言が無い）をコピーしてチェックしたら、IEでも正しくセンタリングされてましたよ。
その他の回答 (8)
- himajin100000
- ベストアンサー率54% (1660/3060)
蛇足ながらIE 7についても知っておくといいでしょう。正式版でも直ってませんでした。(IE 6と同じ対処で回避可能) http://journal.mycom.co.jp/special/2006/ie7beta2/001.html http://blog.drry.jp/2006/02/25/ie7-b2-xhtml
お礼
ご回答ありがとうございます。 IE7の現状では直ってないのですね・・。 本件は、xml宣言なしでIEに対応しようと思います。 とても参考になりました。 ありがとうございます！
- leap_day
- ベストアンサー率60% (338/561)
こんにちは No.2です <body>の中身だけ変えてるのであまり気にしたこと無かったですけど dtd宣言がないとIEでちゃんと表示できないなんて知りませんでしたね～～（苦笑） <style type="text/css"> <!-- div { width:320px; margin:auto; } #left { width: 10px; float:left; background-color:red; } #center{ width:300px; float:left; background-color:green; } #right { width: 10px; float:left; background-color:blue; } --> </style> <div> <div id="left">L</div> <div id="center">C</div> <div id="right">R</div> </div> です あとスペースを空けるときには全角スペースではなく半角スペース,もしくはTabキーで空けてください(No.6様のお礼に書かれてあるものも全角スペースをすべて変えるとちゃんと表示されます） body { margin:0px; }は画面一杯使いたいのであれば追加してください
お礼
ご回答ありがとうございます。 何度もすみません。 全角スペースを修正しました。が、なぜか私の方では上手くいきません。。。 <?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"xml:lang="ja"lang="ja"> <head> <meta http-equiv="Content-Type"content="text/html;charset=Shift_JIS" /> <title></title> <style type="text/css"> <!-- div{width:320px;margin:auto;} #left{width:10px;float:left;background:red;} #center{width:300px;float:left;background:green;} #right{width:10px;float:left;background:blue;} --> </style> </head> <body> <div> <div id="left">L</div> <div id="center">C</div> <div id="right">R</div> </div> </body> </html>
- goo_ta
- ベストアンサー率62% (5/8)
念のため確認しますが、同じXHTMLでも標準モードと互換モードの文書型宣言があるのはご存知ですか？ http://zyco.abz.jp/design/index3.shtml 標準モードになっていれば、No2の方のやり方で、IEでもうまく行くはずです。私のサンプルを載せておきます。 http://www.mc-taichi.com/web/ ここでは、 margin-left:auto; margin-right:auto; としていますが、同じことです。 あなたもご自分のサンプルを提示されたら、一発で問題点がわかると思いますよ。 ちなみに、コンテンツの幅が可変（％指定）の場合は、<body>の左右余白を同じパーセンテージで指定すれば、一番外のDIV無しでセンタリングできます。 http://www.mc-taichi.com/bbs/bbs.php
お礼
ご回答ありがとうございます。 標準モードの文書型宣言ですが、確認しましたら、標準モードになっておりました。それぞれのモードが存在する事をご指摘いただくまで、知りませんでした。 私のサンプルですが、下記のソースコードです。 まだ、標準モードに必要な何かが抜けているのでしょうか？ <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <style type="text/css"> <!-- BODY { margin:0 auto; } DIV#left { width: 10px;float:left;background:red;margin-left:auto;margin-right:auto;} DIV#center { width:300px;float:left;background:green;margin-left:auto;margin-right:auto;} DIV#right { width: 10px;float:left;background:blue;margin-left:auto;margin-right:auto;} --> </style> </head> <body> <div style="width:320px;margin:auto;"> <div id="left">L</div> <div id="center">C</div> <div id="right">R</div> </div> </body> </html>
- an-gooo
- ベストアンサー率50% (6/12)
ぬぅ・・・ BODYにPADDINGもしくは一番外のDIVにPADDINGかMARGIN・・・ ってのはどうでしょうか？
- an-gooo
- ベストアンサー率50% (6/12)
body以下の物をすべてテーブルでかこってしまう・・・ってんはなしでしょうか？
お礼
ご回答ありがとうございます。 テーブルを使用せずに、横に3つの領域(仮にleft,center,right)をDIVで確保して、そこにいろいろとコンテンツを書こうとしてます。 横に並んだ3つの領域を全体の中央にしたいのですが、floatを使用すると上手くいきません。 ちなみに、XHTML1.0に準拠で書いています。
- himajin100000
- ベストアンサー率54% (1660/3060)
>しかし、IE6では変わらずでした。 きちんと"標準準拠モード"で記述してみて下さい http://oshiete1.goo.ne.jp/qa3249894.html
- leap_day
- ベストアンサー率60% (338/561)
こんにちは サンプルのような書き方をされているのであればIDをつけていない<div>にwidth設定してそれをセンタリングすればいいです (もしくは別のidをつけるか） div{ width:320px; margin:auto; }
お礼
こんにちは。 ご回答ありがとうございます。 ご指摘の方法で、Firefox2.0で実現できました！！ しかし、IE6では変わらずでした。 IEのバグなのかこれから調べますが、お分かりでしたら、 教えていただけると幸いです！
- imopro
- ベストアンサー率35% (58/163)
ものは試し． CSSでbodyに， margin :0 auto; と指定してみてください．
お礼
ご回答ありがとうございます。 試してみましたが、やはり変わらず中央寄せにならずです。 環境は、IE6、Firefox2.0です。 ID指定しているDIVを囲っているDIVに同様の事をしてもだめでした。
関連するQ&A
- floatを使用すると中央寄せにならない
CSSについて質問があります。 floatを使って2段組のレイアウトにしたのですが、 MacのIE5.2で見ると、floatを使ったdiv（container）だけ中央寄せではなく 左寄せになってしまいます。MacのSafariやFirefoxでは正常に見れました。 URL：http://fuma.xrea.jp/ /* CSSソース*/ html{height : 100%; width : 100%;} body{width : 100%; text-align : center; margin : 0px auto; padding : 0px;} #container{ margin : 0px auto; padding : 0px; width : 720px;} div#main{ text-align : left; width : 490px; margin : 0px; padding : 8px 0px; float : left;} div#side{ margin : 0px; padding-bottom : 8px; text-align : left; width : 230px; float : right;} div#copyright{ text-align : center; margin : 0px auto; padding : 10px 0px; clear : both; width : 720px;} /* HTMLソース */ <div id="container"> <div id="side">てすと</div> <div id="main">てすと</div> </div> <div id="copyright">test</div> <div align="center">を使っても中央寄せになりませんでした。 どうすれば、MacのIEでも中央寄せにできますか？
- ベストアンサー
- CSS
- 中央寄せが出来ません。
下記の様な構成で中央寄せが出来ません。 何がいけないのでしょうか？ アドバイスお願い致します。 index.html <body> <div id="hedderdiv"> <div id="hedder"> </div> <div id="buttomgrp"> </div> </div> </body> CSSファイル #hedderdiv { width: 800px; height: 500px; margin: 0 auto; } #hedder { width: 800px; height: 280px; background-color:#3F3; position:absolute; top: 0px; left: 0px; margin: 0 auto; } #buttomgrp { width: 650px; height: 200px; background-color:#C63; position:absolute; top:200px; left:50px; margin: 0 auto; }
- ベストアンサー
- HTML
- float:leftを使用して全体を中央寄せしたい
html勉強中のものです。 float:leftを使用したdivすべてbody全体の中央寄せにしたいです。 下記のソースから教えて下さい。 html -------------- <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="shift_jis"> <title>Director Blog</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <header> <hgroup> <h1 id="header">Why not?</h1> </hgroup> <ul class="header"> <li>menu</li> <li>info</li> <li>list</li> </ul> </header> <div class="float left"> <div class="cc"><p><img src="images/Dragon+Ash+02_02.jpg" width="200" height="150"> </p> <h1 class="float left"> Miyuki Yamanaka</h1> <p class="float left"> Photographing and questioning. Miyuki is a Japanese photographer. Her inspiration comes from the mundane scenes, which often relates to nostalgia and obsolescence. She explores the</p> </div> </body> </html> -------------- css -------------- charset "utf-8"; /* ---------------------------------------------- This style definition is initiarize. ------------------------------------------------- */ body , div , header, dl , dt , dd , ul , ol , li , h1 , h2 , h3 , h4 , h5 , h6 , pre , form , fieldset , input , textarea , p , blockquote , th , td { margin-right: 0 auto; margin-left: 0 auto; padding: 0 auto; } div.float left{ float:left; } div.cc { width:200px; background: #FAFAD2; float: border-style: none; margin-right: auto; margin-left: auto; padding: 20px; position: relative; overflow: hidden; layout-grid-line:200px; border-radius: 5px; -webkit-box-shadow: 1px 1px 3px #000; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; } -------------- よろしくお願いします！
- 締切済み
- CSS
- 全体のレイアウト：中央揃えについて
画面の全体のレイアウトを中央にそろえたいと思い、「div.Zen { margin-left: auto; margin-right: auto }」を指定してもIEでは中央揃えになっていませんでした。 ところが、「body { text-align: center }」を指定したところ、中央揃えになりました。 ブラウザで比較してみると、 ■IE7 body { text-align: center }で、中央揃え div.Zen { margin-left: auto; margin-right: auto }では中央にならない ■Opera9.25 body { text-align: center }では、中央にならない div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■NetScape7.1 body { text-align: center }では、中央にならない div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■Firefox2 body { text-align: center }では、中央にならない div.Zen { margin-left: auto; margin-right: auto }で、中央揃え と、ブラウザによって中央になる指定が違うのですが何故このようなことが起こるのでしょうか？ 回答よろしくお願いします。 <?xml version="1.0" encoding="Shift-JIS" standalone="no"?> <!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> <style type="text/css"> <!-- div.Zen { width: 900px; margin-left: auto; margin-right: auto } body { text-align: center } #Ky { float: left } div.Ku1_0 { width: 900px; height: 150px; background-color: aqua } --> </style> <title></title> </head> <body> <div class="Zen"> <div class="Ku1_0" id="Ky"></div> </div> </body> </html>
- ベストアンサー
- HTML
- floatでレイアウトした後にcleafixは必ず必要ですか？
いつもお世話になっております。 早速質問ですが、floatを使用してレイアウトした箇所には必ずclearfixを指定しなければならないのでしょうか？ 例えば以下のレイアウトでテキストを組んでみたのですが、winXPのIE7、IE6、opera9、FireFox3、では問題なく表示されていました。 それで外枠のBOXの幅が設定されており、float指定した要素の親要素に高さの指定があり、float指定した要素の親要素の下に外枠と同じ幅の画像やdivがあればclearfixを記述しなくてよいのではと考えたのですが、仕事でWEBを制作しないといけない為、確認しておきたくて投稿しました。 ご回答を宜しくお願いします。 〔XHTML〕 <body> <div id="wrapper"> <div id="header"> <div id="header01">AAA</div><div id="header02">BBB</div> </div><!--end header--> <div id="pankuzu">ccc</div> <div>111</div> <div>222</div> </div><!--end wrapper--> </body> 〔css〕 #header{ text-align:left; width: 900px; height:150px; } #header01 { float: left; width: 400px; } #header02 { float: left; width: 450px; height: 150px; } #pankuzu{ width: 900px; height: 20px; background-color:#999; }
- ベストアンサー
- HTML
- StyleSheet：float 使用時、テキストが指定幅を超える
お世話になります。 スタイルシートの設定について、質問させてください。 下記のようなページを作ったところ、 main_left内のテキストが指定した400pxを超え、 main_rightがmain_leftの次の段落に回り込んでしまいます。 テキストが400を超えないようにするには どうすればよいでしょうか？ もっと具体的に言えば、 http://www.geocities.jp/multi_column/float/sample/float.html このサイトのようにしたいだけなのですが、 どこが間違っているのかがわからず困っています。 --------------------------------------- index.html --------------------------------------- <html><head><link rel="stylesheet" href="main.css" type="text/css" /></head> <body> <div id="main"> <div id="main_left"> 123456789012345678901234567890123456789012345678901234567890</div> <div id="main_right"> 12345678901234567890123456789012345678901234567890</div> </div> </body></html> --------------------------------------- main.css --------------------------------------- #main { width:600px; } #main_left { float:left; width:400px; background-color:#CCFF99; } #main_right { float:right; width:190px; background-color:#FFCC99; } --------------------------------------- 以上、ご回答よろしくお願いいたします。
- ベストアンサー
- HTML
- CSS：全体の画面の中央ぞろえ
全体的にレイアウトを中央にそろえたいのですが、それをするのにあるサイトに、「margin:0 auto」または「margin-left:auto ; margin-right:auto」を指定すると書いてあったのですが、そのようにしても中央ぞろえにはなっていませんでした。 どのようにすればよいのでしょうか？ div { float: left; margin-left: auto; margin-right: auto } div.Kukaku1 { background-color:blue; width: 900px; height: 150px; } div.Kukaku2_1 { background-color:green; width: 300px; height: 25px } div.Kukaku2_2 { background-color:aqua; width: 300px; height: 25px } div.Kukaku2_3 { background-color:gray; width: 300px; height: 25px } div.Kukaku3_1 { background-color: black; width: 250px; height: 200px; } div.Kukaku3_2 { background-color: fuchsia; width: 650px; height: 150px } div.Kukaku3_3 { background-color: lime; width: 650px; height: 50px } div.Kukaku4_Ga { width: 450px; height: 150px } div.Kukaku4_1 { background-color: maroon; width: 450px; height: 80px } div.Kukaku4_2 { background-color: navy; width: 450px; height: 70px } div.Kukaku4_3 { background-color: red; width: 450px; height: 150px } <div class="Kukaku1"></div> <div class="Kukaku2_1"></div> <div class="Kukaku2_2"></div> <div class="Kukaku2_3"></div> <div class="Kukaku3_1"></div> <div class="Kukaku3_2"></div> <div class="Kukaku3_3"></div> <div class="Kukaku4_Ga"> <div class="Kukaku4_1"></div> <div class="Kukaku4_2"></div> </div> <div class="Kukaku4_3"></div> 回答よろしくお願いします。
- ベストアンサー
- HTML
- floatを使ったレイアウトのくずれについて
Dreamweaver8で2カラムレイアウトのサイトを制作しています。 一番上からheader、トップ画像、ナビゲーションが続き、その下に2カラムのボックスがあります。 ボックスの左をコンテンツのAボックス(main02)、ボックスの右側をメニューのBボックス(navcontainer)とします。 containerの幅は776px、Aボックスの幅510px、Bボックスの幅230pxとし（各々width,paddingの合計）containerの幅に収まるように定めています。 しかし、Dreamweaverの作成画面では、Aボックスの文字は定めた幅510pxで折り返されるにもかかわらず、ボックス自体ははそれより100px以上も多い625pxまで広がり、Bボックスとの合計が766pxに収まりきれないのでメニューのBボックスは上、コンテンツのAボックスが下にずれてしまいます。 それでもプレビューすると、IE7、safari、firefox では正常に表示され、IE6だけが制作画面のとおりずれて表示されます。 どうしてこのようになるのでしょうか。 間違いを訂正いただけるとありがたいです。 /* CSS */ body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; } #container { width:776px; margin:0px auto 0px auto; background-image:url(main.gif); background-repeat:repeat-y; } #header { width:776px; height:65px; margin :0px auto 0px auto; } #main02 { width:410px; float:left; font-size:13px; color:#333; text-align:left; line-height: 1.5em; padding: 20px 50px 20px 50px; } #navcontainer{ width: 200px; margin-bottom:15px; float:right; padding: 30px 30px 0 0; } #navcontainer ul{ list-style: none; margin: 0; padding: 0; border: none; line-height:120%; font-size:12px; font-weight:bold; } #navcontainer li{ margin-bottom: 5px; border-bottom:1px dashed #666; background:url(menu_list.gif) left center; background-repeat:no-repeat; padding-left:15px; } #navcontainer li a{ display: block; padding: 5px 5px 5px 7px; text-decoration: none; width: 100%; } .clear { clear: both; } -------------- /* html */ <html> <body> <div id="container"> <div id="header"><img src="○○" </div> <div id="top2_m"><img src="○○" /></div> <div id="navi"><a href=○○></div> <div id="navcontainer"> <ul id="navlist"> <li>○○</li> <li>○○</li> <li>○○</li> </ul> </div> <div id="main02">○○</div> <div class="clear"></div> <div id="main">○○</div>/*ここから1カラム*/ <div id="footer">○○</div> </div> </body> </html>
- ベストアンサー
- CSS
- IEで中央寄せにしたい
<html> <head> <title>test</title> <style type="text/css"> <!-- body {margin-right : auto; margin-left : auto; width : 50%} div#center { text-align: center; } --> </style> </head> <body> <DIV style=background:red;> test</DIV> </body> </html> これでスレイプニルだとちゃんと中央寄せになるのですが ＩＥ９だと横画面いっぱいに広がってしまいます。 ＩＥでも指定した幅で表示させる方法はありますか？
- ベストアンサー
- HTML
- div#left {width:50%;
div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？
- 締切済み
- HTML
お礼
ご回答ありがとうございます。 IE6で、センタリングできました！ DOCTYPE宣言の前にあったxml宣言を無くしたら実現できました。 なるほど、IEのバグのようですね・・・。 XHTMLに準拠する場合xml宣言は必須なので、後方互換モードでセンタリングするか、xml宣言なしのままにしてしまうか。 悩みどころがまた出てきましたが、とにかく実現できたので良かったです！ ありがとうございます！