掲示板/スタイルシート質問板/過去ログ/一覧/ ３カラムがＩＥで崩れます。

0 名前：あや： 2006/05/19（金） 12:48 ID:TRVH9wjM: 　あるＣＳＳの本を元に下記のように組みました。
　ez-html7001というテキストエディタでもFirefoxでもＯＫなのに、ＩＥ６．０では<div id="sub-index03">がずるずると下に落ちてしまっています。
　どこを直せばいいのでしょうか。字数オーバーのためＨＴＭＬとＣＳＳを分けて投稿させて頂きます。
　ＨＴＭＬ
<?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>
ここにサブインデックス、その１。　
</p>
</div>
<div id="sub-index02">
<h2>見出し</h2>
<p>
ここにサブインデックス、その２。
</p>
</div>
<div id="sub-index03">
<h2>見出し</h2>
<p>ここにサブインデックス、その３。</p>
</div>　
</div>
<div id="footer">ここはフッター</div>
</div>
</div>
</body>
</html>

1 名前：あや： 2006/05/19（金） 12:48 ID:TRVH9wjM: ＣＳＳ
@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を横並びさせたかったのです。
　それであれからいろいろ調べてみて、どうやらこのカラム落ちは↓で説明されている中でも「ＵＲＬなどの半角英数が連続している場合」が理由のようです。

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

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

ＰＳ．わ、私は今回の投稿でミスを犯しておりました。カラム落ちしているのはＣＳＳでは#sub-index2の部分です。ＨＴＭＬでは#3が#2より先に記述してあったのですがミスしてしまいました。申し訳ありません。
　カラム落ちの症状を改めて報告すると
「３カラムを横並びにしたいが、センターに置きたい#sub-index3が#sub-index2の左斜め下に落ちてしまっている」（ＩＥ６．０のみ）というものです。

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