ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：yuuko_sis xhtml+cssのレイアウト　センタリング　カラム落ち
困り度：
  • 困っています
 xhtml+cssレイアウト超初心者です。
何か間違っている所があれば教えてください。
よろしくお願い致します。

【問題点】
　１）全体がセンタリングにならない
　　　□□■■■■■□□
　　　□□■■■■■□□
　　　□□■■■■■□□(左右の中央にしたい)
　２）subがカラム落ちしてしまっている？
　　　mainとsubの下に『スト』という文字が入ってしまっています。


【cssソース】
@charset "Shift_JIS";
* {margin: 0;
　padding: 0;
　}
body {color: #000000;
　font-size: 62.5%;
　}

/*==wrapper==*/
div#wrapper {
width: 950px;
margin : 0 auto;
}

/*==heaber==*/
div#heaber {
width: 950px;
margin-bottom: 30px;
background-color: #66CCFF;
}

/*==contents ==*/
div#contents {
width: 950px;
float: left;
background-color:#66CCFF;
}

/*==main ==*/
div#main {
width: 740px;
margin-right: 20px;
float: left;
background-color:#6699FF;
}

/*==sub ==*/
div#sub {
width: 190px;
float: left;
background-color:#6666FF;
}

/*==siteinfo ==*/
div#siteinfo {
clear: both;
width: 950px;
background-color:#6633FF;
}



【HTMLソース】
<?xml version="1.0" encoding="Shift_JIS"?>
<!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"​ lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<link rel="stylesheet" media="tv, screen, projection, print" href="css/import.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p>テキスト</p>
<p>テキスト</p>
</div><!--/header-->
<div id="contents">
<div id="main">
<p>テキスト</p>
<p>テキスト</p>
</div><!--/main-->
<div id="sub">
<p>テキスト</p>
<p>テキスト</p>
</div><!--/sub-->
</div><!--/contents-->
<div id="siteinfo">
<p>テキスト</p>
<p>テキスト</p>
</div><!--/siteinfo-->
</div><!--/wrapper-->
</body>
</html>
質問投稿日時：08/04/15 20:13
質問番号：3951613
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答10pt
回答者：tenderfeel <?xml version="1.0" encoding="Shift_JIS"?>
xml宣言が入っている場合、IEは後方互換モードになるので
margin:0 autoでのセンタリングが出来なくなります。
これを回避するには
* html body {text-align:center;}などとして、センタリングする必要があります。
* htmlはIE6以下にだけ適用されるおまじないです。（つけなくても問題はありません）

また、IEにはfloatしてる要素のmargin-leftとrightの値が倍になる
有名なバグがありますが、カラム落ちは大抵それが原因です。
これはmarginをpaddingにするとか、中の要素にmargin付ける等で回避出来ます。
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：08/04/16 18:31
回答番号：No.3
この回答へのお礼ありがとうございます！
解決できました！

回答

良回答20pt
回答者：auty ・　steel_gray様のご指摘を参考にして修正してみました。

・　主な修正点は、

　　　　　1.　<?xml version="1.0" encoding="Shift_JIS"?> の削除。
　　　　　　　IE対応のため。

　　　　　2.　文字コードをutf-8に変更。

　　　　　3.　スペル間違い（heaber）。

・　FirefoxとIEで確認しました。

・　２）subがカラム落ちしてしまっている？
　　　　これは、確認出来ませんでした。

・　ファイルは１つにまとめた物で試してあります。

------------------------------------------------------------
<!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"?​ lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<style type="text/css">
<!--
@charset "Shift_JIS";

* {
margin: 0;
padding: 0;
}

body {
color: #000000;
font-size: 62.5%;
}

/*==wrapper==*/
div#wrapper {
width: 950px;
margin: 0 auto;
}

/*==heaber==*/
div#header {
width: 950px;
margin-bottom: 30px;
background-color: #66CCFF;
}
...
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：08/04/16 17:48
回答番号：No.2
この回答へのお礼ありがとうございます！！
解決できました！！
まだまだxhtml＋cssコーディング初心者の為
次から次へと問題が発生して大変ですが頑張ります！
とても解りやすいご指摘ありがとうございました(o^-^o)

回答

 
回答者：steel_gray 中身はほとんど見てませんが。

IEで発生しているなら
<xml>宣言があると（DOCTYPEが1行目にないと）互換モードになってしまうというIEのバグのせいではないですか？
​http://www.infinity-dimensions.com/blog/archives/xhtmlcssie.html​

こちらが参考になるかも。
​http://oshiete1.goo.ne.jp/qa1991120.html?ans_count_asc=0​
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/04/15 22:24
回答番号：No.1
この回答へのお礼中央寄せの問題は解決しました！
ありがとうございました！
 
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ