自作ＨＰのレイアウトがセンターにきません！＞＜

2023/09/05 16:40

このQ&Aのポイント

自作ＨＰのレイアウトがセンターに配置されない問題が発生しています。
２段組みのみがセンターに配置されず、上下に隙間も発生しています。
XHTMLとCSSのコードを投稿しましたので、ご確認いただけますでしょうか？

ベストアンサー

自作ＨＰのレイアウトがセンターにきません！＞＜。。

2014/06/14 06:48

サイトのレイアウト構成は、『ヘッダー・２段組み・フッダー』をそれぞれ分かりやすく色づけしたのですが、なぜか２段組みのとろだけ、センターにきません。また、３つの構成に上下に隙間が出来てしまいます。誰かどこがオカシイのか教えてください。下記にXHTML、CSSを入力しました、メモ帳等にコピペして見て頂けないでしょうか？ご回答お待ちしております。　【XHTML】 <?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> <title>　Ｌｉｓｔ　</title> <link rel="stylesheet" href="style.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div class="box_header"> </div> <hr /> <div class="box_a"> </div> <div class="box_b"> </div> <hr /> <div class="box_footer"> </div> </body> </html> 　【CSS】 @charset "shift_jis"; body { background-color: #ffffff; margin-left: auto; margin-right: auto; font-family: Osaka, "ヒラノギ角ゴ Pro W3","小塚ゴシック Std B","ＭＳＰゴシック",; } hr { height: 1px; width: 100%; background-color: #000000; } div.box_header { background-color: #ff0000; width: 1200px; height: 200px; margin-left: auto; margin-right: auto; } div.box_a { background-color: #808080; float: left; width: 800px; height: 2000px; margin-left: auto; margin-right: auto; } div.box_b { background-color: #0000ff; float: left; width: 400px; height: 2000px; margin-left: auto; margin-right: auto; } div.box_footer { background-color: #008000; clear: left; width: 1200px; height: 200px; margin-left: auto; margin-right: auto; }

hiromitsu418
お礼率0% (0/2)

レンタルサーバ・ASP
回答数2
ありがとう数4

みんなの回答 （2）
専門家の回答

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

ベストアンサー

nana_coco
ベストアンサー率66% (56/84)

2014/06/14 12:15 回答No.3

こんにちは。全体をDIVでくくる方法もありますが、とりあえずbox_aとbox_bをDIV(box_ab)でくくれば真ん中にはなると思います。 <div class="box_ab"> <div class="box_a"> </div> <div class="box_b"> </div> </div> 【CSS】 .box_ab { width: 1200px; margin: 0 auto; overflow: hidden; } ちなみに、No2さんのご回答もごもっともだと思います。

質問者

補足 2014/06/14 13:11

大変お手数ですが、私のXHTMLとCSS全部をコピペして、修正するところだけ直して頂けないでしょうか・・・＞＜よく分かりません？ちなみに、市販の本に記載されている『段組み』の章で float: left; とか clear: both; とか margin-left: auto; margin-right: auto; は関係ないんですか？？？どういう事なんでしょう？教えてください　＞＜

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/06/14 12:02 回答No.2

すべて基本からやり直しされたほうがよかろうかと・・ HTML4.01の勧告(1999年)以来・transitinal 　HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 ) ・class="box_header"など　DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) 　これ現実には理解されなくて「HTML5では、文書をよりよく構造化するために、新しい追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elem ents )」、すなわちclass="header"とかclass="section"としなさいということ。　今回は左に置くつもりのbox_leftを右や下に置きたくなったら困る。・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )とは、そういう意味　上記をまずしっかり読んでおくこと。 [例] ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) 　で検証済みのHTML4.01strict + CSS2.1 ★タブは＿に置換してあるので戻す。 ★サイズはスマホ用の640px～1000pxまで可変です。900pxを越すと中央配置　floatは使っていないため、重要な内容を先に書けます。ナビゲーションは　右だろうが左だろうが後だろうが、ページの最上部だろうが自由に変更できます。 ★スタイルシートもHTLも誰でもわかりやすい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="nav"> ＿＿＿<h3>ナビゲーション</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="/">トップ</a></li> ＿＿＿＿<li><a href="/Blog">ブログ</a></li> ＿＿＿＿<li><a href="/contact">問合せ</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>

関連するQ&A

段組みレイアウトがfloatleft上手くいきませ
先程の投稿は、一度削除させて頂きました。再度、投稿しなおします。なんとか、以下の画像のところまで持ってくることが出来ました。おかしなところ。 Q１ hedderの上に隙間１０ｐｘが出来てしまっている（本来は、黄色の色が一番上0pxの所まで持って行きたいです） Q2 全体が、centerに行かない、、、。左によってしまっております。以上２点です。宜しくお願いします。失礼致します。こんにちは。ycqと申します。 html+CSSでサイトを作っています。簡単に段組みレイアウトを作って、CSSで色を付けてみるのですが、レイアウトが崩れてしまっています。ソースを修正したりしたのですが、原因を見つけることが出来ませんでした。 heightは基本的に autoでも構いません。 #wrapper 950px #head 950px #main 950px (mainの中に) #main_left と#main_right があります。 #main_left 250px で左側メニューfloat:left; #main_right 700px で右側に回り込ませるために、きっちりと float:left; #main_right の中には #right_box_flash #contents #fotter が入ります。 |----------------------| |----|-----------------| | | | | |-----------------| | | | | |-----------------| |___|____________| 画像も添付させて頂きます。それぞれのボックスにたいして、CSSで色を付けております。おかしい所がございますでしょうか？ Q レイアウトがCenterを指定しているのに、真ん中にいかない。 Q #hedder の上部に１０ｐｘぐらいの空白ができている。margin:0px; padding:10px指定お時間がございましたら、どうぞ、宜しくお願いいたします。失礼致します。 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" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>hogehoge</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <div class="header"> <h2>header</h2> </div> <div class="main"> <div class="main_left"> </div> <div class="left_box_menu"> 　 <h2>left_box_menu</h2> </div> </div> <div class="main_right"> <div class="right_box_flash"> <h2>right_box_flash</h2> </div> <div class="contents"> <h2>contents</h2> </div> <div class="footer"> <h2>footer</h2> </div> </div> </div> </div> </div> </body> </html> **************************************** default.css*********************************** @charset "utf-8"; /* CSS Document */ /*------------------------------*/ 共通設定 /*------------------------------*/ * { margin: 0; padding: 0; line-height: 1.6; font-family: "メイリオ","ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3"; list-style-type: none; } img{ border:none; } body{ margin: 0; padding: 0; text-align:center; background-color:red; } /*------------------------------*/ 大枠ボックス構成 /*------------------------------*/ .wrapper{ width:950px; height:1015; margin:0px auto; padding:0px;background-color:orange; } .header{ width:950px; height:100px; background-color:yellow; } .main{ width:950px; background-color:purple; } .main_left { width:250px; height:915px; margin:0px auto; padding:0px; float:left; background-color:DarkgGldenRod; } .left_box_menu{ width:250px; height:auto; float:left; background-color:khaki; margin:0px auto; padding:0px; } .main_right{ width:700px; height:auto; float:left; } .right_box_flash{ width:700px; height:300px; float:left; background-color:pink; } .contents{ width:700px; height:280px; float:left; background-color:blue; } .footer{ width:700px; height:115px; float:left; background-color:yellow;
- ベストアンサー
- CSS
<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
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">  </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
cssレイアウトで表を作成したいです。
添付した画像の様な表組みをテーブルタグを使用せずに作成するのは可能なのでしょうか？もしくは表はテーブルタグを使用したほうが、ソースの量は少なくて済むのでしょうか全体を囲うBoxAは"height:auto;"を指定してボックスBoxBのテキストの量によって可変する。BoxCのテキストは常にBoxBの最下行と揃える。 /*css*/ .BoxA{ width:490px; height:auto; margin:0px auto 10px auto; background-color:#999999; border:solid #999999 1px;} .BoxA .BoxB{ width:350px; height:auto; margin:0px; padding:5px; float:left; background-color:#fffbfb;} .BoxA .BoxC{ width:129px; height:auto; margin:0px; padding:0px; float:right; background-color:#fffbfb; } .clearfloat { clear:both;}  <div class="BoxA"> <div class="BoxB"> <p>■■■■■■■■■■<br /> ■■■■■■■■■■<p/> </div> <div class="BoxC"> <p style="margin:auto 0px 0px;">■■■■■■■■■■</p> </div> <br class="clearfloat" /> </div>
- ベストアンサー
- 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
全体のレイアウト：中央揃えについて
画面の全体のレイアウトを中央にそろえたいと思い、「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">  </style> <title></title> </head> <body> <div class="Zen"> <div class="Ku1_0" id="Ky"></div> </div> </body> </html>
- ベストアンサー
- HTML
CSSでブラウザごとにレイアウトが崩れたりします。
はじめまして。現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■　　　　■＝ヘッダー □□●●●●　　　　□＝メニュー □□●●●●　　　　●＝コンテンツ（中身）1 □□○○○○　　　　○＝コンテンツ（中身）2 □□○○○○　　　　▲＝フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。そこで、問題の崩れているレイアウトですが、メニュー（□）とコンテンツ（○+●）の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー（□）の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ（○+●）部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。ちなみにこの現象はIE７のみでして、IE６やfirefoxなどでは正常に表示されました。全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、どうか教えていただけないでしょうか？ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。どうかよろしくお願いいたします。
- ベストアンサー
- HTML
印刷プレビューでレイアウトが崩れないようにしたいのですが…
HPを作成しようと思っている初心者です。 Dreamweaverというものでホームページを作ろうと思っているのですが、作成したページをIE6.0で確認し印刷して確認しようとしたところ、画面で見たレイアウトとは違う形で印刷されていて、どこを修正したらいいのかわからず困っています。FireFoxでは印刷プレビューを見てもレイアウトは崩れていませんでした。原因や解決方法がわかれば教えていただけませんでしょうか？よろしくお願いします。 OS=WINDOWS XP <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div class="box"> <div class="boxleft">ピンクの背景（左）</div> <div class="boxright">青の背景（右）</div> </div> </body> </html> ※.boxのバックグラウンドカラーが右上と左下に出てしまいます。プレビューでは.boxの背景は出てないのですが………。
- ベストアンサー
- 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; }
- ベストアンサー
- ブログ
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