3カラムがIEで崩れます。

[統計] HTMLからXHTMLへの移行を進めていますか?



0   名前: あや : 2006/05/19(金) 12:48  ID:TRVH9wjM
 あるCSSの本を元に下記のように組みました。
 ez-html7001というテキストエディタでもFirefoxでもOKなのに、IE6.0では<div id="sub-index03">がずるずると下に落ちてしまっています。
 どこを直せばいいのでしょうか。字数オーバーのためHTMLとCSSを分けて投稿させて頂きます。
 HTML
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title></title>
<link rel="stylesheet" href="/css/index.css" type="text/css" media="screen,projection" />
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li>ここにナビゲーション</li>
</ul>
</div>
<div id="pagetitle">
<h1><img src=alt="ページロゴ" title="ページロゴ" /></h1>
<div class="lead"><p></p>
</div>
</div>
<div id="pagebody">
<div id="content">
<div id="sub-index01">
<h2>見出し</h2>
<p>
ここにサブインデックス、その1。 
</p>
</div>
<div id="sub-index02">
<h2>見出し</h2>
<p>
ここにサブインデックス、その2。
</p>
</div>
<div id="sub-index03">
<h2>見出し</h2>
<p>ここにサブインデックス、その3。</p>
</div> 
</div><!-- content終了 -->
<div id="footer">ここはフッター</div>
</div><!-- pagebody終了 -->
</div><!-- wrapper 終了 -->
</body>
</html>

1   名前: あや : 2006/05/19(金) 12:48  ID:TRVH9wjM
CSS
@charset "Shift_JIS";

/* style reset
----------------------------------------------------------------------------*/
* {
margin: 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6, p, address {
font-size: 100%;
font-weight: normal;
font-style: normal;
}

a { text-decoration: none; }
a img { border-width: 0px; }

/* 全体構造
---------------------------------------------------- */
body {
margin: 0;
padding: 0;
color: #333322;
background: #ffffff;
}
#wrapper {
width: 877px;
color: #333322;
background-color: #f0f5ef;
}

/* ヘッダ
---------------------------------------------------- */
#header {
padding-top: 40px;
height: 40px;
color: #999999;
background: #f0f5ef;
}

#header ul {
margin: 0;
padding: 0;
width: 877px;
list-style: none;
text-align: right;
font-size: x-small;
line-height: 1.0;
}
#header li {
display: inline;
padding-left: 1em;
text-transform: uppercase;
vertical-align: top;
}

/* ページ本体
---------------------------------------------------- */
#pagebody {
width: 870px;
padding-left: 20px;
}

/* ページタイトル
---------------------------------------------------- */
#pagetitle {
margin-top: 10px;
margin-left: 10px;
margin-bottom: 0;
width:832px;
background-color:#f0f5ef;
}

#pagetitle h1 {
float: left;
margin: 0;
padding: 0;
border-style:none;
font-size: 12px;
}


#pagetitle .lead p {
float: right;
margin-top: 0;
margin-right: 0;
width:557px;
text-align: left;
line-height: 1.4;
font-size: 12px;
color: #333322;
background-color: #f0f5ef;
}

/* コンテンツ
---------------------------------------------------- */
#content {
float: left;
width: 862px;
padding-bottom: 2em;
border-top: 1px solid #5f9953;
border-bottom: 1px solid #5f9953;
}

#sub-index01 {
float: left;
margin-left: 0px;
width: 280px;
}
#sub-index02 {
margin-left: 280px;
margin-right: 280px;
}
#sub-index03 {
float: right;
margin-left: 0px;
width: 280px;
}

#content h2 {
margin: 2em 0 0.1em;
font-size: 15px;
font-weight: normal;
color: #60cc4a;
background-color: #e8f0e7;
}

#sub-index01 p, #sub-index02 p, #sub-index03 p {
margin: 0;
line-height: 1.6;
font-size: 13px;
}

/* フッタ
---------------------------------------------------- */
#footer {
clear: both;
}


2   名前: 匿名 : 2006/05/19(金) 12:48  ID:Iz2k4TNT
CSSのコンテンツ部のsub-indexを


#sub-index01 {
float: left;
margin: 0px;
width: 280px;
}
#sub-index02 {
float: left;
margin: 0px;
width: 280px;
}
#sub-index03 {
float: left;
margin: 0px;
width: 280px;
}



こうしてみました。
横並びさせる、という事であってますか?

3   名前: あや : 2006/05/19(金) 12:48  ID:TRVH9wjM
 匿名さま。
 書き込みが遅くなって申し訳ありませんでした。
 はい、#sub-indexを横並びさせたかったのです。
 それであれからいろいろ調べてみて、どうやらこのカラム落ちは↓で説明されている中でも「URLなどの半角英数が連続している場合」が理由のようです。

 http://www.geocities.jp/multi_column/float/07.html

 同じCSSを使っているもう一枚のカテゴリーindexの方がカラム落ちしていないのは、#sub-index3内の(URL記述を含む)<p>要素が少なめだからではないかと考えました。
 今後もこの#sub-index3の記述は増えていくことが確実なので、3カラムから2カラムにレイアウトを変更してみようと思います。
 また何か行き詰まったら書き込ませて頂くかも知れませんが、そのときはまたアドバイスをいただければ嬉しいです。ありがとうございました。

PS.わ、私は今回の投稿でミスを犯しておりました。カラム落ちしているのはCSSでは#sub-index2の部分です。HTMLでは#3が#2より先に記述してあったのですがミスしてしまいました。申し訳ありません。
 カラム落ちの症状を改めて報告すると
「3カラムを横並びにしたいが、センターに置きたい#sub-index3が#sub-index2の左斜め下に落ちてしまっている」(IE6.0のみ)というものです。

4   名前: カヅサツ ◆ThCi95HEzw : 2006/05/19(金) 12:48  [URL]  ID:O5hEMlpW
このサイトが参考になるかと思います。
http://www.geocities.jp/multi_column/

一覧へ戻る