• 締切済み

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
  • 回答数5
  • ありがとう数8

みんなの回答

  • nori_007
  • ベストアンサー率35% (369/1048)
回答No.5

>padding-bottom: 32768px;がいいようなことを書いてあるＣＳＳの >解説ページにも書いてありましたので意味不明ながらも付けました。 「サイトに書いて有ったから設定しました」は避けた方が良いと思います。理解して利用するには良いと思いますが、理解しないで採用することはお勧めしません。ですので、今回は「padding-bottom: 32768px;」「margin-bottom: -32768px;」を忘れた方が良いと思います。 希望を叶える方法として、以下のページの方法は如何でしょうか。ご確認ください。 http://www.techdego.com/2007/05/liquid_image_faux_columns_css.php 【Faux columnsとは？】の項目を参照してみてください。 多分一番簡単な方法です。「#page」部分に背景画像を入れる方法です。 最後に 希望したいデザインを実現するには様々な方法が有り、回答は一つでは有りません。サイトを検索したり、質問したりすると色々な情報が出てきて混乱すると思いますが、様々な情報からご自身が理解出来た方法から試して、学んで行くのが良いと思います。一つの方法を固執しないで色々試してみてください。

milkyway01
質問者

お礼

ありがとうございました 出来る限り理解を深めながら求める理想のスタイルに していこうとおもいます。

  • nori_007
  • ベストアンサー率35% (369/1048)
回答No.4

まず始めに、「padding-bottom: 32768px;」「margin-bottom: -32768px;」は不要だった事を理解して頂けたと思います。 少し調べた所、「padding-bottom:」「margin-bottom:」を利用した方法もあるみたいです。 http://coliss.com/articles/build-websites/operation/css/558.html 上記のページに書かれていますが、「32768px」とは意味が有るのでしょうか？上記の方法を真似るのも良いと思います。 上記の方法を真似るのが難しいと言うので有れば、「.main」と「.submenu」の高さを揃える方法として、単純に height で高さを指定した方が簡単で良いと思います。後はコンテンツ頃に、個別に指定するのが良いのではないでしょうか。 他の方法としては、「.main」と「.submenu」で背景の色は指定せずに、「#page」の背景に、「.main」と「.submenu」の部分に相当する色分けをした背景画像を用意して、高さ方法に繰り返せば良いと思います。 以下のページが参考になります。 http://allabout.co.jp/internet/hpcreate/closeup/CU20050328A/ 他に >少し質問とずれるのですが、ＣＳＳでの配置などを作成出来るソフトはありませんか。 基本的に、html(xhtml)及び、CSS を学んで頂かなければ、Dreamweaver 等は使えないと思います。まずはエディターだけで基本的なレイアウトを作れるようになってください。 >一気に書き換え左メニューに相当するものをコンテンツに組み込む ソフトありませんか。 ありません。 >ＣＳＳもそうなんですがHTMLもゼロからは作れません。 理解して覚えて頂くしかないと思います。 頑張ってください(^^)。

milkyway01
質問者

お礼

ご回答ありがとうございます。 地道に上のアドレスやにているページ(ほとんどフレームなのが欠点)を 研究しようと思い再度上からＣＳＳを見直しています。 padding-bottom: 32768px;がいいようなことを書いてあるＣＳＳの 解説ページにも書いてありましたので意味不明ながらも付けました。 フレームページ作成のように一概には行きませんね。 ありがとうございました。

  • nori_007
  • ベストアンサー率35% (369/1048)
回答No.3

まずは、「padding-bottom: 32768px;」「margin-bottom: -32768px;」を削除、もしくはコメントアウトしてみてください。 この状態で、左側の高さを右側の高さに合わせたいという事でしょうか？ ご確認ください。

milkyway01
質問者

お礼

ご回答ありがとうございます。 いろいろ見て地道にやっているのですが、どうもうまくいきません。 少し質問とずれるのですが、ＣＳＳでの配置などを作成出来る ソフトはありませんか。 また、現在フレームのページ(左メニューと右コンテンツ)を 一気に書き換え左メニューに相当するものをコンテンツに組み込む ソフトありませんか。 ＣＳＳもそうなんですがHTMLもゼロからは作れません。 現在は、Microsoft FrontPage2000を使っています。

milkyway01
質問者

補足

これを外しましたら短い左側が届かず 右側の終わりでフッターがつきました。 これで左側もフッターまで揃ってくれればよいのですが。

  • nori_007
  • ベストアンサー率35% (369/1048)
回答No.2

失礼しました。 左右の高さを整えたいですね。 それなら、「.main」と「.submenu」に、height を設定出来ないですか？ 高さがコンテンツ毎に違うので有れば、「.pageyohaku」の背景画像で、「.main」と「.submenu」の領域に別けるというのも有りだと思いますが・・・。 ご確認ください。

milkyway01
質問者

お礼

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

milkyway01
質問者

補足

padding-bottom: 32768px; は、自分でもよくわかりませんがあわせるのにネットに 書いてありました。 その場合、一番長い文章の終わりに他のがのびているということです。 私の場合は、フッターで締めくくりたいのです。 htnlを上での作成でＣＳＳをstyle.cssで作成すれば 現状どうなるかわかってもらえると思います。 本来はファイルなどを提供できるといいのですがそれが出来ないので htmlとCSSの両方を書きました 画像は提供できないので空欄になってますがタイトル画像のバーと 思ってください。 よろしくお願いします。 >height を設定出来ないですか？ コンテンツごとに高さが違うのでそれが出来ません はじめのＣＳＳから何が変なのかもよくわかりません。 ページと枠のあり方から説明頂けると助かります。 少し混乱しています。 私の場合はbodyがそのページ pageがフレーム風のカラム分けの大枠 その中に上から#header ２つと左右のもの そして締めくくりのフッター(１つまたは２つ) http://web.fc2.com/ 上のとはちょっと違いますが左にメニュー、右に内容 そして、最後に左の方が短いのにCopyrightの上のバーで しっかりと区切ってある http://css.eweb-design.com/ こちらの方が色が付いていてわかりやすいでしょうか 締めくくりはこういう風にしたいです。 (ここは右が幅余りすぎですが) 高さが違う場合の例として２件あげました

  • nori_007
  • ベストアンサー率35% (369/1048)
回答No.1

前の質問も確認しましたが、具体的にどうしたいのでしょうか。 かた、CSS をざっと見て、「padding-bottom: 32768px;」「margin-bottom: -32768px;」の意図が分かりません。ご説明ください。 また、コピーライトと、最下層メニュー項目が中間に有ります。 コピーライト、最下層メニュー項目の位置は中間がご希望なんですか？ 再度最終的にどうしたいのか、ご説明された方が的確な回答を頂けると思います。

milkyway01
質問者

お礼

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

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

関連するQ&A

  • ＣＳＳで左右の固定について

    まず、以下ＣＳＳ 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> <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> 以上のように外部指定で作成したのですが７６０Pxよりブラウザの 幅を狭くするとレイアウトが崩れてしまいます。 何が悪いのでしょう、誰か教えてください。 大きすぎると左のリンクが外へはみ出る感じになりますが とにかく幅は固定し、左右に分かれる「main」「submenu」を Pageの枠にはめてブラウザのウィンドウを小さくしても 変化しない(崩れない)レイアウトを望みます。 調べてもほとんど同じ書き方で崩れないところもあるので どこが悪いのかわかりません。 わかりやすいようにメモも付けて整理してみたのですが どなたかお願いします。

    • 締切済み
    • CSS
  • CSSで文字が流れ込んでしまいます

    CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。 どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>

    • ベストアンサー
    • HTML
  • CSSでの質問です

    初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？

  • safariだけ、cssが効きません！

    こんばんは。css入門者です。 Firefoxなどは大丈夫なのですが、safariだけ、 .staffのmargin-bottom:20px;が効きません。 どこが間違ってるのかわからず、困っています。 どうぞよろしくお願いいたします。 <div class="staff"> <p class="staff_name"><img src="img/name_shige.gif" width="107" height="85" alt="ああ）" /></p><br /> <p class="staff_word">いいいいいい</p> <div class="clearfix"><hr /></div> </div><!-- staff end --> ------------------------ .staff { width:670px; margin-bottom:20px; background-color:#d1ece6; line-height:150%; } .staff_name { float:left; margin:0px; } .staff_word { background-color:#FFF; margin:0px 20px 20px 107px; padding:7px; }

    • 締切済み
    • CSS
  • 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
  • CSSでマージン設定がうまくいきません

    以下の画像のように、div="main"のボックスとdiv="footer"のボックスの間に、 div="main"に対してmargin-bottomを設定したいのですが、 clearfixを使用してもうまくいきません。 次のコードを使用しました。 【HTML】 <div id="main" class="cf"> <div id=class"sub_01"> <p>aaaaaaa</p> </div> <div id=class"sub_02"> <p>bbbbbbb</p> </div> </div> <div id="footer"> <p>ccccccc</p> </div> 【CSS】 #main{ width: 850px; margin: 30px 0px; } .cf:befor, .cf:after{ content:""; display:block; overflow:hidden; } .cf:after{ clear:both; } .cf{ zoom:1; } .sub_01{ width: 500px; float: left; } .sub_02{ width: 350px; float: right; } #footer{ width: 850px; } --------ここまで-------- 以上のコードを書きましたが、最近clearfixのことを勉強したばかりで認識不足です。 親のmainの中のsub_01やsub_02に画像や文字が記入されるにつれて、 親であるmainの高さが変化し、mainに対してmargin-bottomを効かせる方法はないのでしょうか？ どうかご教授よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSS、ヘッダーの上にあいだが開く

    初めてWEBページを作ろうとしているものなのですが、 なぜかヘッダーの上にあいだが開いてしまいます。（送付の図のように） このあいだを無くして濃いオレンジからピッタリ、ヘッダーから始めたいんですけれども、どうしたらいいのでしょうか？ 「HTML」 <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>公式サイト</title> </head> <body id="body"> <div id="header"> <h1 class="title">title</h1> </div> <div id="page"> <div id="main"> <div class="center"> <img src="top-picture2.jpg" width="675" height="420"> </div> <h4>グループについて・・・</h4> <p>testtesttesttesttesttesttesttesttesttest</p> <div class="history"> <h4>更新履歴</h4> </div> <div class="youtube"> <h4>ユーチューブ</h4> </div> </div> <div id="sidebar"> <img src="top.jpg"> <img src="top2.jpg"> </div> </div> <div id="footer"> <h2>フッター</h2> <p class="center">©2014 dutchiris.lolipop.jp All rights reserved.</p> </div> </body> </html> 「CSS」 @charset "UTF-8"; /* 背景色用 */ #body{ background-color: #FFD5AA; } #header{ height: 75px; background-color: orange; clear: both; /*background: url(path_back1.gif) repeat-x bottom; */ } .title{ color: #FFFFFF; padding-top: 30px; font-size:45px; font-family:"ＭＳ Ｐゴシック","ＭＳ Ｐゴシック",sans-serif; width: 1000px; margin: 0 auto; } #main{ float: left; background-color: #ffffff; width: 750px } #sidebar{ float: right; background-color: #ffffff; width: 250px; } #page{ margin-top:75px ; width: 1000px; margin: 0 auto; } .history{ float: left; width: 375px; } .youtube{ float: right; width: 375px; } #footer{ width: 1000px; clear:both; width:100%; } /* 中央寄せ */ .center{ text-align: center; }

    • 締切済み
    • CSS
  • 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初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■　　　　■＝ヘッダー □□●●●●　　　　□＝メニュー □□●●●●　　　　●＝コンテンツ（中身）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
  • ieでの微妙な隙間(CSS)

    以下のソースでhtmlを表示するとie6でpage_topとfooterの間に 3～5pxほどの隙間が開いてしまいます。 しかしfirefoxで表示すると隙間なく表示されます。 特にmarginなど指定していないので何が原因なのかが全くわかりません。 どのようにしたらie6でも隙間なく表示できるようになるでしょうか？ 以下ソースの抜粋です。宜しくお願いします。 //CSS #page_top { clear: both; width: 900px; height: 24px; margin: 0 auto; padding: 0; background: #fff; text-align: right; } #footer { width: 900px; margin: 0 auto; padding: 10px 0 5px 0; background: #fff url(img/footer_bg.gif) repeat-x; text-align: center; } //html <div id="page_top"> <a href="#top"> <img src="img/btn.gif" alt="ボタン" width="114" height="24" /> </a> </div> <div id="footer"> あいうえおかきくけこさしすせそ・・・ </div>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する