• 締切済み
  • すぐに回答を!

CSSで左右の固定について

まず、以下CSS body { text-align:center; } <! メインのフレーム指定> #page { width:760px; margin:0 auto; text-align:left; } <! ヘッダー及び横項目指定> #header { width:100%; text-align:center; height:65px; } #header2 { width:750px; line-height:35px; background-color:#FF00FF; } <! 中央左右設定及び余白指定> .pageyohaku { margin:0 10px; } .main {width:570px; float:right; background-color:#E0FFFF;} .submenu { width:170px; float:left; background-color:#FFC0CB;} .c-both { clear:both; } <! 下記記載事項枠指定> .footer1 {width:100%; text-align:left;line-height:15px;background-color:#24CF00;clear:both;} .footer2 {width:100%; text-align:center;line-height:15px;background-color:#DCDCDC;clear:both;} <! リンク指定> .link {color:blue;} --------------------------- 次にhtml <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> <title>ホームページ</title> </head> <body> <div id=page> <div id=header> <p><img border="0" src="img/logo.gif" width="730" height="65"></p> </div> <div id=header2> <p>このページはします</p> </div> <div class=pageyohaku> </div><! pageyohakuの終わり指定> <div class=main> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> </div><! mainの終わり指定> <! サブメニュー一覧> <div class=submenu> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> </div><! submenuの終わり指定> <div class=c-both> </div><! c-bothの終わり指定> <div class=footer1> 最下層メニュー項目</p> </div><! footer1の終わり指定> <div class=footer2> <p>コピーライト</p> </div><! footer2の終わり指定> </div><! Pageの終わり指定> </body> </html> 以上のように外部指定で作成したのですが760Pxよりブラウザの 幅を狭くするとレイアウトが崩れてしまいます。 何が悪いのでしょう、誰か教えてください。 大きすぎると左のリンクが外へはみ出る感じになりますが とにかく幅は固定し、左右に分かれる「main」「submenu」を Pageの枠にはめてブラウザのウィンドウを小さくしても 変化しない(崩れない)レイアウトを望みます。 調べてもほとんど同じ書き方で崩れないところもあるので どこが悪いのかわかりません。 わかりやすいようにメモも付けて整理してみたのですが どなたかお願いします。

共感・応援の気持ちを伝えよう!

  • 回答数4
  • 閲覧数159
  • ありがとう数11

みんなの回答

  • 回答No.4

#2です。 >左右どちらが長くなるにしろ最後を締めくくる >良くあるコピーライトなどを記載して締めくくる感じにしたいです。 >リンクの方を右の記事の長さに >htmlで無駄な改行以外に調整する手段はありませんか。 これらの補足は最初の質問内容と違っていますが・・・? 左右で高さをそろえるについては、私も過去に同じ質問をさせていただいたことがあるのでそちらを参照してください。

参考URL:
http://oshiete1.goo.ne.jp/qa4222235.html

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます。

質問者からの補足

確かにおっしゃるとおりですね。 http://oshiete1.goo.ne.jp/qa4251468.html に新しく質問しました。 今回のことと総合的に教えて頂ければ幸いです。

関連するQ&A

  • CSSによる左右の高さをそろえる

    http://oshiete1.goo.ne.jp/qa4249087.html で質問してましたが、すこし内容が変わるので改めて質問させて頂きます。 現在のCSSは、 body { text-align:center;} /*メインのフレーム指定*/ #page { width:760px; margin:0 auto; text-align:left; padding-bottom: 32768px; margin-bottom: -32768px; } /*ヘッダー及び横項目指定*/ #header { width:100%; text-align:center; height:65px; } #header2 { width:750px; line-height:35px; background-color:#FF00FF; } /*中央左右設定及び余白指定*/ .pageyohaku { margin:0 10px; } .main {width:570px; float:right; background-color:#E0FFFF;padding-bottom: 32768px; margin-bottom: -32768px;} .submenu { width:170px; float:left; background-color:#FFC0CB;padding-bottom: 32768px; margin-bottom: -32768px;} .c-both { clear:both; } /*下記記載事項枠指定*/ .footer1 {width:100%; text-align:left;line-height:15px;background-color:#24CF00;clear:both;position:relative;} .footer2 {width:100%; text-align:center;line-height:15px;background-color:#DCDCDC;clear:both;position:relative;} /*リンク指定*/ .link {color:blue;} ------------------- htmlは <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> <title>ホームページ</title> </head> <body> <div id=page> <div id=header> <p><img border="0" src="" width="730" height="65"></p> </div> <div id=header2> <p>このページはレーベル作成を指南します</p> </div> <div class=pageyohaku> </div><! pageyohakuの終わり指定> <div class=main> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> </div><! mainの終わり指定> <! サブメニュー一覧> <div class=submenu> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> </div><! submenuの終わり指定> <div class=c-both> </div><! c-bothの終わり指定> <div class=footer1> 最下層メニュー項目</p> </div><! footer1の終わり指定> <div class=footer2> <p>コピーライト</p> </div><! footer2の終わり指定> </div><! Pageの終わり指定> </body> </html> としてあります。 いろいろ参考にしてやりましたところ途中にコピーライトが ありその後ずっと下の方まで左右のびていて左が少し短くて 終わる感じになりますになります。 どうすればいいのでしょうか 過去の質問も参考にしましたがやったらこうなったというわけです。

    • 締切済み
    • CSS
  • 左右の高さを揃えたいんですが

    css.divのみでレイアウトする勉強中です。 テーブルのように表示内容によって変化する左右の要素の高さを 揃えるにはどうすればいいのかで悩んでいます。 <html> <head> <style type="text/css"> html{height:100%;} body{height:100%;text-align:center;magin:0;} .head{width:800;background:#f8ffff;border:1px solid #000;} .main{height:100%;width:800;} .left{height:100%;width:20%;float:left;background:#f8f8ff;border:1px solid red;} .right{height:auto;width:75%;float:right;background:#aaaaaa;padding:5px;} .center{height:1500;width:200;background:#00ffff;} .foot{clear: both;background:#444666;color:#fff;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる </div> </div> <div class="foot"> foot </div> </div> </body> </html>

    • ベストアンサー
    • 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
  • 回答No.3

#2の補足です。 単にコメント部分の変更といっても、 <!-- -->→html /* */→css など、挿入場所によって違うので注意してください。

参考URL:
http://allabout.co.jp/internet/hpcreate/closeup/CU20051006A/index.htm

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます。

質問者からの補足

下にIEでは一応行きましたが 短い方のリンク側の背景色が一番下まで行きません よく左右のマージンで計算する方法 margin-left: 150pxなどで左の幅が150pxの時に 右の項目にこれを入れると可能とありますが、 上下(この場合下)に高さ指定は記事によって異なるので 出来ません リンクの方を右の記事の長さに htmlで無駄な改行以外に調整する手段はありませんか。 お願いします。

  • 回答No.2

コメント部分を <! メインのフレーム指定> から /* メインのフレーム指定 */ などに変更してみてください。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます。

質問者からの補足

CSSの方のコメントをなおしたら左右の固定はうまくいきました。 しかし、htmlの方の <div class=footer1> 最下層メニュー項目</p> </div><! footer1の終わり指定> <div class=footer2> <p>コピーライト</p> </div><! footer2の終わり指定> </div><! Pageの終わり指定> </body> </html> の所の2行(CSSではfooter1,footer2)のところが 左右の短い方(この場合リンク)にこの2行が行ってしまい 2行が右の「本日はようこそ」の下に隠れてしまいます。 これを下に持ってくるにはどうすればよいでしょうか 左右どちらが長くなるにしろ最後を締めくくる 良くあるコピーライトなどを記載して締めくくる感じにしたいです。 アドバイスお願いします。

  • 回答No.1
  • maman53
  • ベストアンサー率18% (30/161)

overflow: hidden; を指定しないとどんどんはみ出しちゃうんだな こういうことか?

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます。 どこに付けても変化は見られませんでした。 何かこれに加えた記載をしなければならないのでしょうか。 自力でも様々なサイトを見て検討中ですがよろしくお願いします。 なお、サブメニューが下にきているのは、更新時にhtmlを見やすくするためです。

質問者からの補足

どこの項目に付け加えればよろしいのでしょうか CSSのことはわかりますが、 Pageか、clear:bothの指定で分岐したのを統合する 後でしょうか、それともHeaderの所ですか。 よろしくお願いします。

関連するQ&A

  • IEとFireFoxでCSSの見た目をそろえたい

    CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが 完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。 足し算はあっているはずなのですがどこを修正すればよいのでしょうか? HTML <body> <div id="wrapper"> <div id="container"> <div class="header"> <h1>&nbsp;</h1> </div> <div class="kaijyo"></div> <div class="main"> <div></div> <h2>&nbsp;</h2> <div class="kaijyo"></div> <div class="line"> <hr> </div> </div> <div class="menu"> </div> <div class="kaijyo"></div> <div class="footer"> <p>&nbsp; </p> </div> </div> </div> </body> CSS #wrapper{ text-align:center; /*IE対応*/ } #container { width: 980px; margin-left:auto; margin-right:auto; background-color:#CAB59B; text-align:left; } .header{ width: 970px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#000000; text-align:left; height:20px; } .main{ width: 670px; float: left; margin: 0px 0px 0px 0px; padding: 10px 15px 10px 15px; background-color:#E4E4E4; text-align:left; } .menu{ width: 260px; float: left; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; background-color:#CAB59B; text-align:left; } .footer{ width: 970px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#FFFFFF; text-align:left; } .kaijyo{ clear: left; }

    • ベストアンサー
    • CSS
  • HTMLやcssに詳しい方教えてください

    HTML、cssに詳しい方、助言お願いします。 footerの部分なのですが、footerより上の部分(サイドのナビやメイン部分)にj Query、javascriptを入れる(入れたのはアコーディオン)と、footerの部分がおかしくなります(footerのbackground-colorが一部消えるなど) どなたか、もしおかしい部分があるのでしたら、おかしい部分の指摘をお願いします。xxxはテキストを入れている部分です。 footerのHTML <div class="footercolor clearfix"> <div id="footer"> <div class="footerbox1"> <ul class="footertext1"> <li><a href="../ranking.html">xxx</a></li> <li><a href="../area-top/area.html">xxx</a></li> </ul></div> <div class="footerbox2"> <ul class="footertext2"> <li><a href="../index.html">xxx</a></li> <li><a href="../site.html">xxx</a></li> <li><a href="../info.html">xxx</a></li> <li><a href="../system.html">xxx</a></li> </ul></div> <div class="footerbox3"> <ul class="footertext3"> <li><a href="../inquiry.html">xxx</a></li> </ul></div> </div> <address class="copyright">Copyright (C) xxx.com 2014 All Rights Reserved.</address> footerのcss .footercolor{ background-color:#FFCC99; } #footer{ width:960px; margin:0 auto; } .footerbox1{ width:320px; float:left; } .footerbox2{ width:320px; float:left; } .footerbox3{ width:320px; float:left; } .footertext1{ text-align:center; margin-top:12px; list-style:none; padding:3px; } .footertext2{ margin-top:12px; list-style:none; padding:3px; text-align:left; margin-left:80px; } .footertext3{ text-align:center; margin-top:12px; list-style:none; padding:3px; margin-left:50px; } .footertext1 a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .footertext2 a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .footertext3 a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .copyright{ clear:both; text-align:center; font-weight:bold; padding-top:50px; padding-bottom:10px; }

    • 締切済み
    • SEO
  • CSSで画面を構成しています。

    CSSで画面を構成しています。 左ブロック、右ブロック共に角丸の四角にしたいので、**_head.gifというようなフタとソコになるような画像を使っています。 このままだと左右ブロックの高さが当然そろわないのですが、何か良い方法はないでしょうか? テーブルレイアウト以外であれば、多少イレギュラーな方法でもかまいません。 *css********** div#body{width:800px; margin:10px auto; text-align:center; padding:0; } div#header{padding:0; margin:0 0 10px 0; background-image:url(**.gif); width:800px; height:50px; text-align:left; } div#main{ width:800px; text-align:left; } div#submenu{padding:0; margin:0 10px 10px 0; width:200px; text-align:left; float:left; } div#contents{padding:0; margin:0 0 10px 210px; width:590px; text-align:left; } div#footer{padding:0; margin:0 0 5px 0; clear:both; width:800px; height:30px; text-align:left; } *html**** <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> <div id="submenu"> <img src="img/common/sub_head.gif" width="200" height="10" />  <div>左ブロック</div> <img src="img/common/sub_foot.gif" width="200" height="10" /> </div> <div id="contents"> <img src="img/common/main_head.gif" width="590" height="10" />  <div>右ブロック</div> <img src="img/common/main_foot.gif" width="590" height="10" /> </div> </div> <div id="footer"> フッター </div> </div>

    • ベストアンサー
    • HTML
  • wrapperなしでCSSのレイアウトは組まない方がいいですか?

    いつもお世話になっております。 実はふとした疑問というか挑戦といいますか・・・ いつもはとあるサイトさんからダウンロードしたテンプレートの枠組みを使用していたので、余り気にしていなかったのですが、今回フッター部分もヘッダー部分と同様にrepeat-xをして永遠に延長したデザインを作りたいと考えています。 ヘッダー部分は背景を上に合わせて作れば問題ないと思うのですが、フッター部分はページごとに縦の長さが違うためそれぞれ別のスタイルシートを要するのもなんとなくやめたほうがいいようなきがしています。 そこでいつもはwrapperで囲っていたためにヘッダー部分しか横軸を延長できなかったのですが、フッター部分だけをwarapperからはずして延長させたいとおもっています。 これは可能でしょうか? どうかよろしくお願いいたいします。 body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:600px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:50px; background-color:#CCFFCC; clear:both; } ------------------------------------- <body> <DIV id="wrap"> <!-- ********* ヘッダー ******** --> <div id="head"> </div> <!-- ********* 左側 ******** --> <div id="left"> </div> <!-- ********* 右側 ******** --> <div id="right"> </div> <!-- ********* フッター ******** --> <div id="foot"> </div> </DIV> </body> ------------------------------------------------- これを・・・ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:600px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:50px; background-color:#CCFFCC; clear:both; } ------------------------------------- <body> <DIV id="wrap"> <!-- ********* ヘッダー ******** --> <div id="head"> </div> <!-- ********* 左側 ******** --> <div id="left"> </div> <!-- ********* 右側 ******** --> <div id="right"> </div> <!-- ********* フッター ******** --> <div id="foot"> </div> </DIV> <div id="foot"> </div> </body> ------------------------------------------------- このようにwrapperからはずしてレイアウトすることは可能でしょうか?色々いじっているとなんとか見た目はできたのですが、縮小するとフッターが真ん中あたりに来たり、なにかと不安でして・・・ かなり長文になりましたが、どうかよろしくお願いたします。

    • ベストアンサー
    • HTML
  • CSS:区画のレイアウト1

    現在、CSSの練習中なんですが、 http://kokoro.es.land.to/HTML/Rensyuu.html 上記のURLで、最終的にURL内の下の図(CSSによる区画のレイアウト)のようなレイアウトにしたいのですが、Kukaku4_3(class名、色:red)のところで画面のあるとおり、Kukaku4_2(class名、色:navy)から下の方に範囲が伸びてしまい、うまくいきません。ほかにもいろいろ試したのですが、URL内の下の図(CSSによる区画のレイアウト)のようにするにはどうすればよいでしょうか? 回答よろしくお願いします。 div { float: left;} div.Kukaku1 { background-color:blue; width: 900px; height: 179px } div.Kukaku2_1 { background-color:green; width: 300px; height: 20px } div.Kukaku2_2 { background-color:aqua; width: 300px; height: 20px } div.Kukaku2_3 { background-color:gray; width: 300px; height: 20px } div.Kukaku3_1 { background-color: black; width: 250px; height: 300px; } div.Kukaku3_2 { background-color: fuchsia; width: 650px; height: 150px } div.Kukaku3_3 { background-color: lime; width: 650px; height: 150px } div.Kukaku4_1 { background-color: maroon; width: 500px; height: 80px } div.Kukaku4_2 { background-color: navy; width: 500px; height: 70px } div.Kukaku4_3 { background-color: red; width: 400px; height: 150px }

    • ベストアンサー
    • HTML
  • CSS、width100%でもできる余白

    CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか? また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}

    • ベストアンサー
    • CSS
  • floatの挙動について

    いつもお世話になっております。 次のコードで#sidebody内に#a&#65374;cboxを左側に縦に並べ、#dboxを右側に配置したいのですが、 #dboxのfloatが#sidebodyに対して効きません。 原因を教えていただけませんでしょうか。 シンプルな構造なのに、何が問題なのか分かりません。 何卒よろしくお願いいたします。 <html> <head> <link href="test.css" rel="stylesheet" type="text/css" media="screen"> <body> <div id="content"> <div id="sidebody"> <div id="abox">a</div> <div id="bbox">b</div> <div id="cbox">c</div> </div> <div id="dbox">d</div> </div> </body> </head> </html> #content { width: 200px; height: auto; border: red solid; } #abox { width: 100px; height: 20px; background-color: blue; text-align: center; color: white; } #bbox { width: 100px; height: 100px; background-color: pink; text-align: center; color: white; } #cbox { clear: both; width: 100px; height: 100px; background-color: darkblue; text-align: center; color: white; } #dbox { width: 100px; height: 250px; float: left; background-color: green; text-align: center; color: white; }

    • ベストアンサー
    • CSS
  • 100%ボックス・フッタ固定、IE6だけ左寄り…

    いつもお世話になっています。 画像のような構成で、100%ボックスの下にフッターを付けたページ なのですが、IE6だと左寄せになってしまいます。 いろんなCSS解説のHPを渡り歩いてみたのですが、どこが悪いのか 分からず。 どうぞよろしくお願いします。 /*100%ボックスとフッター画面の下固定のためのCSS-------------*/ html{ height: 100%; } body{ background-image: url(../common/bg.gif); height: 100%; text-align: center;/*ie6 centering*/ } * html div#container{ height: 100%; } div#container{ width: 800px; margin: 0 auto; background-color: #FFFFFF; position: relative; min-height: 100%;   text-align: left;/*ie6 centering*/ } body > #container { height: auto; } div#main{ padding: 0 0 60px 0; } div#main:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } /*\&#63615;*/ * html #container { height: 1em; overflow: visible; } /**/ /*フッター---------------------------------------*/ #footer{ clear:both; background-color:#4682B4; position:absolute; bottom:0px; height:30px; width:100%; text-align:center; line-height:30px; font-size:80%; color:#FFFFFF; }

    • ベストアンサー
    • HTML
  • ブラウザ間のCSSの表示違いにつきまして

    現在、趣味のホームページを作成しているのですが、IEでは意図したとおり表示されるのですが、firefoxではCONTENT内上部(float boxの上)に隙間のようなものができてしまって困っています・・・ CSSは以下になります。 #content { width: 680px; margin: 0 10px; padding: 0; background-image: url(../img/content-back.jpg); background-repeat: repeat-y; text-align: center; overflow: auto; text-align: center; } #left { float: left; width: 456px; margin: 0; padding: 50px 0; text-align: center; } #right { float: right; width: 224px; margin: 0; padding: 50px 0; background-color: #000000; text-align: center; } #footer { height: 60px; margin: 0 10px; padding: 0; background-image: url(../img/footer-back.jpg); background-repeat: repeat-x; text-align: center; clear: both; } CONTENTを親要素として、その中にleftとrightボックスを作成しました。 なお、overflow: auto;をなくしてcontent・left・rightに高さを指定したら隙間はなくなるのですが、共に内容に準じた高さ(auto)にしたくて・・・ どなたか解る方いらしたらご教示お願いします!

    • ベストアンサー
    • HTML
  • 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