• 締切済み

XHTML、CSSレイアウトでフッターを常に最下部に配置するには?

フッターを最下部に表示したいのですが、#footerに position: fixed; bottom:0;を付け加えてもフッター だけ最下部に表示されコンテンツ部分がついてきません。 ヘイトに100%をつけくわえるのでしょうか? どうかご教授願います。 body { margin: 0; padding: 0; text-align:center; font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:1em; background-color:#CCCCCC; } ol,ul,li { margin: 0; padding: 0; } li { list-style:none; } h1,h2,h3,p { margin: 0; padding: 0; } #container { margin: 0 auto; text-align: left; width: 740px; height: 100%; background-color:#FFFFFF; } #header { width:740px; height:80px; margin:0; padding:0; background-color:#FFFFFF; background-image:url(img/nine_rogo.gif); background-repeat:no-repeat; background-position:left center; } #contents { width:740px; height:100%; margin:0; padding:0; background-color:#FFFFFF; } #menu { float:left; width:140px; height: auto; margin:0; padding:0; background-color:#FFFFFF; color:#000000; } #main { float:right; width:580px; height:auto; margin:0; padding:0 0 0 10px; background-color:#FFFFFF; color:#000000 } #footer { clear:both; width:740px; height:auto; background-color:#FFFFFF; color:#000000; font-size:1em; padding:0.3em 0; text-align:center; }

noname#124617
noname#124617

みんなの回答

noname#19206
noname#19206
回答No.1

position: fixedはIE非対応だったはずです。違ったかな・・・?

noname#124617
質問者

補足

ご回答ありがとうございます。 昨日悶々としたなか質問してしまいなんだか説明不足な 文章で申し訳ありません。 過去ログで似たような回答を参照したのですが明確なも のがなかったもので・・・ 当方Macでposition: fixedはfirefoxでは一応適用されるようですが。 テーブルのようにヘイト100%指定で簡単に適用できればよいのですが。

関連するQ&A

  • CSSでブラウザごとにレイアウトが崩れたりします。

    はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■    ■=ヘッダー □□●●●●    □=メニュー □□●●●●    ●=コンテンツ(中身)1 □□○○○○    ○=コンテンツ(中身)2 □□○○○○    ▲=フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー(□)とコンテンツ(○+●)の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー(□)の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ(○+●)部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE7のみでして、IE6や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
  • CSSでレイアウトが崩れます

    CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }

  • CSSのpositonでフッタを下部に固定したのですがIE6でズレてしまう原因が分からないので教えてください

    こんばんは、CSSのpositionで下部にフッタを固定する為に設定したらwinIE6で見るとフッタだけ右にずれてしまいます。 当方Mac、osXで主にドリームウィーバーに手打ちです。safari、frefoxではずれませんでした。ソースを省略すると原因が分からないのでCSSを全部載せます。 アドバイスいただけると大変うれしいです。お願いいたします。 html,body{ text-align:center; margin: 0px; background:#FFFFFF; height:100%; } #countainer{ position: relative; height: 100%; min-height:100%; } #contents { padding-bottom:50px; } #header{ height:106px; background-image: url(img/headbg.gif); background-repeat: repeat-x; } #logo { width: 800px; height: 96px; text-align: left; padding: 10px 0 0 0; margin: auto; background-image: url(img/bg_navi.gif); background-repeat: no-repeat; background-position: 100% 100%; } #logo img{ float: left; } #navi{ width: 600px; float: right; } #navi ul{ margin:75px 11px 0 0; padding:0; } #navi li{ width: 100px; height: 21px; float: right; margin:0; padding:0; list-style-type:none; text-align: center; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; line-height: 100%; background-image: url(img/bg_navi.gif); background-repeat: no-repeat; background-position: 0% 100%; } #navi a:link,#navi a:visited{ color:#635142; padding: 0 0 0 12px; } #navi a:hover{ color:#FF6633; text-decoration:none; } #navi a.s:link,#navi a.s:visited{ color:#B59980; } #main{ width: 800px; margin: auto; text-align:left; font-size:80%; } #main .topimg{ width:500px; float:left; text-align: center; } #main .news{ width:300px; height:300px; float:right; background:url(images/bg_news.gif) no-repeat 0px 20px; } #main .news p{ margin:50px 40px 0px; color: #5D4F41; line-height: 150%; font-size: 12px; } #main .body{ width:550px; float:left; clear:both; } #main .body p{ margin:10px 5px; } #main .menu{ width:183px; float:left; font-size:12px; } #main .tabmenu{ width:250px; float:right; } #main h1 span.jp{ font-size: 12px; letter-spacing: normal; font-family:"MS Pゴシック","Osaka","ヒラギノ角ゴPro"; } #main h2{ margin: 30px 0 5px 0; padding:3px; border-bottom: 4px double #83684F; font-size:180%; color: #333333; clear: both; } #main h3{ margin: 30px 0 5px 0; padding:3px; background-color: #83684F; font-size:120%; color: #FFFFFF; clear: both; } #main th{ padding: 3px 5px; background-color: #F3EBDC; border-bottom:1px solid #83684F; text-align:left; font-weight: normal; color:#A07D5E; } #main a.mail{ padding:5px 0 5px 30px; background:url(images/btn_mail.gif) no-repeat 0px 0px; color: #FF0000; } #main a.mail:hover{ background:url(images/btn_ov_mail.gif) no-repeat 0px 0px; } #main .box{ width:183px; float:left; } #main .box img{ margin:0 8px; filter:chroma(color=#FFFFFF); } #main .box h3{ margin: 0 10px; padding: 3px; font-size:100%; color:#A07D5E; position: relative; top: -10px; background-color: #F3EBDC; } #main .box p{ margin: 0 10px; padding: 0; font-size:10px; top: -5px; position: relative; } #footer{ clear:both; color:#666; font-family: Arial, Helvetica, sans-serif; border-top-width: 3px; border-top-style: solid; border-top-color: #D8D8D8; position: absolute; bottom: 0px; margin:auto; text-align: center; font-size: 75%; height: 30px; width: 100%; } #main .body #mn6 { margin-top: 20px; } /*----------------------------span-*/ span.tel{ font-size:24px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#424242; line-height: 24px; } /*-------------------------------------for any--*/ .clear{ clear:both; line-height:1px; } #main .body p { margin-left: 15px; } #main .topimg { margin-top: 20px; }

    • ベストアンサー
    • Mac
  • divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

    divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・?

    • ベストアンサー
    • CSS
  • CSSのフッター部分について

    CSS初心者です 今回外部CSSで作成したのですが途中まではうまくいきました しかし最後のフッターを入れるとレイアウトが崩れるのです。 今回の形状はページに上から「ページ(ホームページタイトル)」「ヘッダー(サブタイトル)」「同域上に左右に分けて「submanu」「main」」として最後にfootで「コピーライトなどを書いて」閉めたいのです 作ったCSSは以下の通り(どこが悪いのでしょう(foot入れるまで理想に近づいていたのですが)) *{ margin: 0px; padding: 0px; } div#page { text-align: left; border: 1px solid #333333; background: #66FFFF; width: 720px; margin: 0px; } div#head { width: 720px; padding: 5px 5px 0px 0px; margin: 0px; background: #FF00FF; } div#main { margin: 0px; border-left: 1px solid #FF; padding: 20px 0px; background: #00CCFF; width: 560px; height: 5000px; float: left; } div#submenu { width: 160px; height: 5000px; margin: 0px; padding: 20px 0px; float: left; background: #00FF33; } div#foot{ clear:both; text-align:center; font-size:10px; background:#FFFFFF; width:720px; height:20px; }

    • 締切済み
    • CSS
  • CSSのpositionでフッターが最下に配置されてくれない

    CSSの配置がどうにもうまくいきません。 フッターをWebページの最下に配置したいのですが、どうしてもWindowsIE7だと中央くらいの場所にきてしまいます。どうやったら治りますでしょうか? WindowsのIE6やFirefoxではOKなんですが・・・・・ 以下、ソースです。 ●CSS ------------------------------------------------------ div#hdr-wrap { position:absolute; background:url(../img/cmn/hdr_bg.gif) repeat-x; top:0px; width:100%; height:120px; text-align:center; } div#hdr { width:900px; _width: 902px;/*IE対策*/ height:120px; margin-left: auto; margin-right: auto; text-align: left; } div#hdr-vi{ padding-top:71px; padding-left:0px; } div#gbnavi-wrap { position: absolute; background:url(../img/cmn/gbnv_bg.gif) repeat-x; top: 120px; width:100%; height: 51px; text-align:center; } div#gbnavi { width: 900px; _width: 902px;/*IE対策*/ top: 120px; height: 51px; margin-left: auto; margin-right: auto; text-align: left; } div#main-wrap{ position: absolute; top:171px; width:100%; height:100%; background: url(../img/cmn/bg_cts_sdw.gif) repeat-x; text-align:center; } div#main{ position: static; padding-top:0px; width: 900px; _width: 902px;/*IE対策*/ height:100%; margin-left: auto; margin-right: auto; text-align: left; } div#ftr-wrap { clear: both; background:url(../img/cmn/ftr_bg.gif) repeat-x; width:100%; height:151px; text-align:center; } div#footer{ clear: both; color: #415880; width: 900px; _width: 902px;/*IE対策*/ height:151px; margin-left: auto; margin-right: auto; text-align: left; } ------------------------------------------------------ ●以下、HTMLソースです ------------------------------------------------------ <div id="hdr-wrap"> <div id="hdr"> <div id="hdr-vi">コンテンツ入る</div> </div> </div> <div id="gbnavi-wrap"> <div id="gbnavi"> <ul> <li>コンテンツ入る</li> </ul> </div> </div> <div id="main-wrap"> <div id="main"> <!--RIGHT AREA--> <div id="right">コンテンツ入る</div> <!--/RIGHT AREA--> <!--LEFT AREA-->     コンテンツ入る。サイドバーが。 <!--/LEFT AREA--> <!--/MAIN AREA--> <!--/MIDDLE AREA--> </div> <!--FOOTER AREA--> <div id="ftr-wrap">コンテンツ入る</div> <!--/FOOTER AREA--> </div> ------------------------------------------------------ なぜかIE7だけ、ftr-wrapというフッターエリアの一番外側のDIVから中身が全部画面の中央あたりにあたかもレイヤーで上にのっているがごとく、ミドルエリアのコンテンツの上に乗っかるかたちで配置されてしまいます。 宜しくお願いいたします。

  • CSSのレイアウトについて

    CSSのレイアウトをダウンロードしました。 初心者ながら調べてやっていたのですが、2点ほど分からない点があります。 ・ヘッダー、フッター含め全ての幅を画面いっぱいにしたい。 widthを100%にしてみたのですが、レイアウトが崩れるだけで画面幅いっぱいにはなりませんでした。 ・3カラムの真ん中を固定幅900pxにしたい。 ご存知の方いらっしゃいましたらご教示ください。よろしくお願いします。 以下がCSSのソースです。 * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { width: 922px; } #header { color: #333; width: 900px; float: left; padding: 10px; height: 200px; background: #E7DBD5; } #navigation { float: left; width: 900px; color: #333; padding: 10px; margin: 0px 0px 0px 0px; background: #BD9C8C; } #leftcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #content { float: left; color: #333; background: #F2F2E6; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 460px; display: inline; } #rightcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #footer { width: 900px; height: 200px; clear: both; color: #333; background: #BD9C8C; padding: 10px; }

    • 締切済み
    • CSS
  • レイアウト、フッターが崩れてしまいます。

    横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またsafari、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 *html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="#”></div> </div> <span id="menu"><ul><li><img src="#" alt="#" width="200" height="100" /></li><li><img src="#" alt="#" width="200" height="100" /></li><li><img src=”#" alt="#" width="200" height="100" /></li><li><img src="#" alt="#" width="200" height="100" /></li></ul></span> <h2><img src="#" alt="#" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ~~ ~~ </div> <div id="footer"> <span align="center">&copy;#</span> </div> </div> </body> </html> *css body { font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:30px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }

  • cssによる配置の計算が合いません

    cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>

  • CSSでのレイアウトが崩れてしまうんです。

    お世話になります。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; }

専門家に質問してみよう