IEだとdivが横に並びません

解決済

質問者：ceina
質問日時：2008/07/27 22:52
回答数：3件

CSSでレイアウトをしているのですが、横にふたつdivを並べたいのに、右側のdivが下にまわってしまいます。
http://oshiete1.goo.ne.jp/qa3576983.html
こちらでIEでは左の余白が倍になってしまうと知り、display:inlineを指定しましたが、解決しません。
何が原因でしょうか。

HTML:
<div id="main">
<div id="mainl">
</div>
<div id="mainr">
</div>
</div>

CSS:
#main {
width: 900px;
}
#mainl {
float: left;
height: 317px;
width: 324px;
display: inline;
padding-top: 26px;
padding-right: 16px;
padding-bottom: 0px;
padding-left: 40px;
}
#mainr {
float: right;
height: 317px;
width: 480px;
padding-top: 26px;
padding-right: 40px;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： font_color
回答日時：2008/08/05 19:46

ソースを見る限り問題ないと思います。

paddingを細かく指定されているので少し疑問に思ったのですが、子要素（#mainl・#mainr内）に指定幅を超える要素が含まれていませんか？
たとえば#mainl内に入れる要素としては、
「width:324px;」-「padding-right:16px;」-「padding-left: 40px;」=268px以下の幅
となります。一度確認されてはいかがでしょうか。

- 0
- 件

通報する

この回答へのお礼

お礼が遅くなりすみません。おっしゃるとおりでした。初歩的なミスで恥ずかしい限りです。どうもありがとうございました。

通報する

お礼日時：2008/08/27 10:53

No.2

回答者： nori_007
回答日時：2008/07/28 00:03

検証してみました。

以下のソースをエディタに貼付けて確認してみてください。
一部、修正しています。

-- 検証ソース --

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>goo</title>
<style type="text/css">

</style>
</head>

<body>
<div id="main">

<div id="mainl">
<p>左スペース</p>
</div>

<div id="mainr">
<p>右スペース</p>
</div>

</div>
</body>

</html>

-- 検証ソース --

display: inline; は不要です。

質問の際は単にソースを示すだけでなく、上記のようにソース１式示して頂いた方が、問題点が判るかも知れません。
また、少し前の質問を検索される事をお勧めします。

後は、DOCTYPEスイッチを意識してみてください。その際に IE6 にはバグも有るので、合わせて調べてみてください。