IEとFireFoxでCSSの見た目をそろえたい
- CSSの素人が2カラムスタイルのデザインを作る際に、IEとFireFoxで見た目が違う問題に直面しています。
- 足し算は正しく行っているが、どこを修正すればいいのか分からない。
- 問題のコードはHTMLとCSSがあり、要素の幅や背景色などが設定されています。
- ベストアンサー
IEとFireFoxでCSSの見た目をそろえたい
CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが 完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。 足し算はあっているはずなのですがどこを修正すればよいのでしょうか？ HTML <body> <div id="wrapper"> <div id="container"> <div class="header"> <h1> </h1> </div> <div class="kaijyo"></div> <div class="main"> <div></div> <h2> </h2> <div class="kaijyo"></div> <div class="line"> <hr> </div> </div> <div class="menu"> </div> <div class="kaijyo"></div> <div class="footer"> <p> </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; }
- shion0409
- お礼率50% (1/2)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )に書かれているように、 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.』 なのです。 スタイルシートを導入する前にHTMLをきちんと書けるようにならないと、必ずそのような問題で悩まされることになります。 必要ないので、詳しい説明は省きますから、おいおい学んでください。 [原因] IEは長く独自仕様でユーザーを囲い込んでいたため、ウェブ標準とは異なる解釈をする古いIE用の互換モードを持っています。IEであっても標準モードで動作するようにHTMLを記述すれば、多くの問題は解決します。IEがウェブ標準に方針変更をしたことから、互換モードに対する対応は不要になるでしょう。 [対策] HTMLをIEであっても標準モードで動作するDOCTYPEで作成しましょう。いくつかのDOCTYPEがありますが、HTML5の勧告が近いことを考えると、HTML4.01strictで記述するほうが良いでしょう。 すなわち、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> と言う記述が良いでしょう。 ⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) [HTML4.01strict] 1999年のHTML4.01の勧告以来!!!「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」とされてきました。 HTML4.01strictでは、文書構造をHTMLで記述し、その文書構造に基づいてプレゼンテーションをスタイルシートで指定することになりました。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 ★DIVは、HTM5では原則として使わなくなります。その理由はHTML5では「文書構造を示すために新しい要素が追加された」からです。HTML4.01では、 ・ヘッダ,本文,フッタをもつような完結した記事は、<div class="article"></div> ・文書のヘッダにあたる部分は<div class="header"></div> ・本文は<div class="section"></div> ・ナビゲーションは<div class="nav"></div> のようにマークアップしなければなりませんでしたが!!HTML5では<heade><section><nav>などが導入されます。 ⇒新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) 当然ですが、wrapperとかcontainer、kaijyo、mainのようなclass名ID名は、？？？です。 【サンプル】 こんな簡単なHTMLとスタイルシートで実現できるはずです。それでいてリキッドデザインですから、スマホのような小さなディスプレイでも超幅広ディスプレイでも利用できるはずです。 サイズ計算なんてほとんどしなくて良いですし、ブラウザ間の表示誤差も考えなくて良い。(ＩＥ６以前は除く) ・Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )のDATA入力(右上)で、チェック済みのHTML4.01strict + CSS2.1です。 ・<div class="section"></div>→<section></section>などとするだけでHTML5になります。 class名やid名をつける参考に ★タブは＿に置換してあるので戻す。 <!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"> <!-- div.header,div.section,div.footer{ width:90%;min-width:640px;max-width:1000px;/* 幅を固定したけりゃwidth:960px; */ margin:0 auto; padding:5px 10px; } div.section{ position:relative; min-height:300px; } div.section h2,div.section div.section{ margin-right:260px;/* 右側をあけておく */ } div.section div.section{ width:auto;min-width:0;/* 上書きして */ } div.section div.nav{ position:absolute; width:260px; height:100%; right:0;top:0; } /* ここまで・・以下は分かりやすいように色づけ */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:white;} div.section div.section{background-color:silver;} div.section div.nav{background-color:lime;} div.footer{background-color:yellow;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>ブロック配置にfloatを使用していないので、記事内でfloatやclearが自在に使える。</p> ＿＿＿<p>HTMLは誰(googleなどの機械も)が読んでも構造が分かる。書くのも楽・・。当然スタイルシートも簡単になる。</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li>トップ</li> ＿＿＿＿<li>著書</li> ＿＿＿＿<li>自己紹介</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (1)
- metametamu
- ベストアンサー率51% (153/295)
とりあえずDOCTYPE宣言を指定するのが先ではないかと。 xhtml1.0 strictが個人的にはオススメです。 その後でバグつぶしですね。方法は http://adp.daa.jp/web.html 気のせいでなければkaijyoというclassを与えられているdiv要素の中身は空白ではないですか？ もしそうであればクリアするだけのための要素は不要なので、html的にはこっちで書く方がいいかと。 ■元ソース <div class="kaijyo"></div> <div class="footer"> ↓ ■修正後 <div class="footer kaijyo">
関連するQ&A
- 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でfloatを利用してプロックを左右に並べています。 その際、左のブロックにbackground-colorを指定していますが、右のブロックの情報が多かった場合に、background-colorが途中で終わってしまいます。 どのようにしたらよいでしょうか。 下記のCSSもおかいしところがあるかも・・・指摘をお願いします。 #page { width: 750px; margin-right: auto; margin-left: auto; text-align: left; border: 1px solid #666666; margin-bottom: 0px; } div.blocka{ float: left; background-color: #FFC556; width: 150px; margin:0px 0px 0px 0px; padding:5px ; border-right:1px solid #666666 ; } div.blockb { float: left; margin:0px 0px 0px 0px; padding:10px ; width: 550px; }
- ベストアンサー
- HTML
- CSSでページ作成、Firefoxでうまく表示できません
ご教授いただけますでしょうか。 CSSでページ作成を試みていますが、IEでは思ったとおりに表示されますが、Firefoxでは崩れてしまいます。 内容は、大枠の中に、ヘッダーと左右のフロート（左：メニュー、右：内容）のシンプルなデザインです。 以下、CSS部分です。 /* 大枠 */ #container { width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; background-color: #FFFFFF; font-size: 13px; border-left: 1px #663333 solid; border-right: 1px #663333 solid; border-top: 1px #663333 solid; border-bottom: 1px #663333 solid; padding: 5px; text-align: left; } /* ヘッダー */ .header { width: auto; height: auto; background: url(img/header.jpg) repeat-x; margin: 0px; } /* メニュー */ .left { float:left; width:20%; background-color:#ffffff; padding: 5px; } /* 内容 */ .right { float:right; width:75%; background-color:yellow; padding: 5px; } ここからHTMLに書き込んだものです。 <div id="container"> <div class="header"> ヘッダー </div> <div class="left"> メニュー </div> <div class="right"> 内容 </div> </div> Firefoxでは、大枠にあたる container 部分が、ヘッダーしか囲まず、メニューと内容部分がその下に表示されます。 どこがおかしいか、ご指摘いただければ幸いです。 どうぞよろしくお願い申し上げます。
- ベストアンサー
- CSS
- CSSについての質問です
下記のプログラムについて解らないのですが、containerの内のh1と ulの位置関係ですがh1にmargin-bottom: 0と指定し、ulにmargin-top: 0としてあるが、この2つがくっつかないのは何故でしょうか？ 親切な方、ご回答いただけますようよろしくお願いします。 body{ background-color: #f2f2f2; padding: 0; margin: 0 } div#container { width: 750px; margin-left: auto; margin-right: auto; background-color: white } h1{background-image: url(画像.jpg); width: 640px; height: 120px; margin-bottom: 0; margin-left: 50px; } ul{ list-style: none; text-align: center; padding: 0; margin-left: 10px; margin-top: 0 } li{ width: 128px; float: left; padding: 0px; margin: 0px; }
- 締切済み
- HTML
- 背景に影をつける方法（CSS）を教えてください。
以前からやりたかったメインの背景の左右に影をつける方法にチャレンジしているのですが、IE6だけ少しうまくいきません・・・ やり方としてはメイン（wrapper）のボックスに＋影の幅（左＋右）のwidthを指定して、左右の影の幅分を左右それぞれにpaddingを指定しています。 その中をヘッダー＋2カラムで構成しているのですが、IE６だけ右側部分のpaddingが2倍？になっているのか、おさまりきらず下に回り込んでしまいます。 その他のブラウザでは左右に2カラムが表示されています。 これはIE6のバグの一種でしょうか？ これの解決方法を教えていただけないでしょうか？ <div id="main" class="clearfix"> <div id="header"> </div> <div id="left"> いいいいいいいいいいいいいいいいいいいいいいい </div> <div id="right">aああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div> </div> body { font-size: 12px; margin: 0px; padding: 0px; height: auto; width: 100%; text-align: center; position: absolute; line-height: 150%; background-image: url(img/bg.gif); float: left; } #main { text-align: left; width: 910px; margin-top: 0px; margin: 0px auto; ; ; background-image: url(img/main-bg.gif); padding: 0 10px 0 10px; } #left { text-align: left; float: left; width: 210px; margin-left: 0px; padding: 10px 0 10px 0; } #right { width: 700px; float: right; }
- ベストアンサー
- HTML
- CSS floatについて教えて下さい。
【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか？初心者ですので、よろしくお願い致します。
- ベストアンサー
- HTML
- 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
- CSS3で困ってます！
現在、HTML5でサイト書き出し中です。CSS3も使っているのですが、大きな問題が発生いたしまして… 背景のボックスの大きさがbodyの大きさに追随しないんです。ボックスからINFOMATION欄などが飛び出してしまってデザイン的によろしくない感じです。 ボックス要素は、divのidのtopに対して与えています。topはペ0次全部のコンテンツをまとめるためのものです。 今日一日、CSSのソースとにらめっこしたのですがわかりませんでした。皆さんなら、わかると思い頼らせて頂くことにいたしました。どこが間違っているかわかりません！教えてください（涙） CSSは、 @charset "utf-8"; /* CSS Document */ *{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } a{ text-decoration:none; } div#top{ width: 920px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; box-shadow: 3px 3px 10px #666; -moz-box-shadow: 3px 3px 10px #666; -webkit-box-shadow: 3px 3px 10px #666; -o-box-shadow: 3px 3px 10px #666; text-align:left; margin:0 auto; } div#header{ text-align:center; } div#banner{ width: 900px; margin: 0px auto; } div#menu{ width: 900px; margin: 0px auto; } div#menu ul { float:left; margin:0; padding:0; height: 40px; text-align:center; } div#menu li { margin:0; padding:0; float:left; font-size:90%; text-align:center; list-style-type:none; width: 225px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.25s; -moz-transition-property: background-color; -moz-transition-duration: 0.25s; -o-transition-property: background-color; -o-transition-duration: 0.25s; background-color: #3C0; height: 40px; } div#menu li span { font-family:verdana; font-size:140%; color:#fff; line-height: 40px; } div#menu li:hover{ background-color: #0F0; } div#contents{ width:900px; height: auto; margin:0 auto; padding: 10px 0; } div#info { float:left; width:450px; } div#info h2{ font-size: 25px; width: 450px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; background-color:#090; color: #FFF; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; text-align:left; } div#info dl dt { clear:left; float:left; width:7em; padding:10px 0.5em; } div#info dl dd { margin-left:0; padding:10px 0.5em 10px 8em; background:#fff url(images/bg_info_line.gif) 0 100% repeat-x; } div#news{ float: right; width: 430px; text-align:left; } こんな感じです。 実際のページはここにあります。 http://skino.cyber-ninja.jp/test/
- ベストアンサー
- CSS
- IEの「カラム落ち」に悩まされています
この2日間、IEの「カラム落ち」に悩まされています。 色々検索すると、Margin とpadding/border を一緒に使わないこと、らしいので、そのように設定したつもりなのですが...... 私の環境は、MacOS X 10.5.6 にVirtual PC-XP SP3 を載せています。 Mac safari(3.2.1)、safari-[開発]-IE6/IE7 ではカラム落ちしていないのですが、Virtual PC-XP SP3 の IE6 では見事に落ちています。 この設定を Virtual PC ではない XP/VISTA のIE6/IE7 で見たとき落ちているかどうか、教えていただけないでしょうか。 また、どこを直せば落ちないようにできるかも教えてください。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift-jis" /> <META name="robots" content="noindex,nofollow"> <META name="description" content="Gallery"> <title>Gallery</title> <style type="text/css"> <!-- body { margin:0; padding:0; font-family:Arial,MS UI Gothic; font-size:13px; background-color:#FFFFFF; } #wapper { margin:0 auto; padding:0; width:952px; min-height:500px; height:auto; text-align:center; background-image:url(hoge.png); background-repeat:no-repeat; backgroud-position:relative; } #header { margin:0; width:950px; text-align:right; } #header h1{ margin-top:-15px; padding-right:30px; color:#708090; } #header h2{ padding-top:30px; padding-right:10px; color:#708090; } #menu{ margin:0 0 20px 500px; } #menu a{ padding-right:5px; padding-left:5px; width:90px; display:inline; text-decoration:none; } #menu a:hover{ color:#FFFFFF; background-color:#FF7F50; } #left{ margin:320px 15px 20px 30px; width:310px; height:auto; text-align:left; line-height:150%; float:left; } #left h2 { padding-left:25px; background-color:#FFFFFF; } .under_l { margin-top:-45px; margin-right:531px; background-color:#FF7F50; } #right{ margin:0px 15px 20px 30px; width:549px; text-align:left; line-height:150%; min-height:400px; float:left; } #right h2 { padding-left:25px; padding-bottom:10px; background-color:#FFFFFF; } .under_r { margin-top:-35px; margin-right:292px; background-color:#FF7F50; } #right ul { list-sytle-type:disk; list-sytle-position:inside; color:#708090; } #right li { width:251px; float:left; } a { text-decoration:none; } a:hover { background-color:#FFEBCD; } #footer { margin:25px 20px; font-size:x-small; text-align:center; clear:both; } strong { color:red; font-weight:bold; } --> </style> </head> <body> <div id="wapper"> <div id="header"> <h2>pagetitle</font></h2> <h1>pagetitle</h1> </div><!--end header--> <div id="menu"> <hr> <a href="#">Index</a> <a href="#">Top</a> <a href="#">Gallery</a> <hr> </div><!--end menu--> <div id="left"> <h2>Gallery</h2> <div class="under_r"> </div> <p> 左カラム<br /> </p> </div><!--end left--> <div id="right"> <h2>右カラム</h2> <div class="under_l"> </div> </div><!--end right--> <div id="footer"> <hr> Copyright (c) All Rights Reserved </div> </div><!--end wapper--> </body> </html>
- ベストアンサー
- HTML
- フルCSSでFirefoxでデザインが崩れてしまいます。
フルcssHPに挑戦しようと思っています。 cssでIEでは思ったような表示が可能ですが Firefox、Operaでは「contents」内のコンテンツが 「container」>を突き抜けて表示されてしまいます。 下記がhtml、cssソースになります。 【HTML】 <body> <div id="container"> <!--メインナビ--> <div id="contents"> <div id="subnavi"> <ul> <li>サブナビ1</li> <li>サブナビ2</li> <li>サブナビ3</li> <li>サブナビ4</li> </ul> </div> <div id="main"> メインコンテンツが入ります </div> </div> <!--フッター--> </div> </body> メインナビ、フッターアンカーリンクは文字数制限上削除しています。 【CSS】 body{ text-align:center; background-color:#ffffff; font-size:10px; color:#333333; } body div { text-align:left; margin: 0 auto; } #container{ text-align:left; width:724px; background-color:#ffffff; padding:15px 18px; position: relative; border:1px solid #666; } #contents{ width:724px; background-color:#ffffff; text-align:left; border-bottom:8px solid #666666; margin-bottom:10px; position: relative; clear:both; } #subnavi{ float:left; width:200px; } #main{ float:left; width:495px; padding-left:29px; } この突き抜けを防止するにはどうしたらよろしいのでしょうか。 「contents」 を削除して表示するとどのブラウザでも表示が可能ですので <div id="contents">の記述が何かおかしいのでしょうか。 それとも根本的にブラウザの問題なのでしょうか？ (ブラウザは最新版を使っています) 皆様、よろしくご回答お願いいたします。
- ベストアンサー
- CSS
お礼
DOCTYPEを変えるだけで正しく動くなんてびっくりです。 今までは呪文のように書いていただけでした。 ありがとうございます。