2009年07月17日

divからはみ出さないで!の件をもう一度。

divからはみ出さないで!の件をもう一度。
こういう事でした。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#outer {
border: 1px solid red;
padding: 10px;
width: 400px;
overflow: hidden;
}
#inner1 {
margin: 5px;
border: 1px solid blue;
height: 200px;
width: 100px;
float: left;
}
#inner2 {
margin: 5px;
border: 1px solid green;
height: 100px;
width: 100px;
float: left;
}
</style>
</head>
<body>

<div id="outer">
<div id="inner1"></div>
<div id="inner2"></div>
</div>

</body>
</html>

これで、 #outer の overflow: hidden; が無いと、赤い枠が延びてくれないのでした。
overflow: visible; の場合は、正しくは「領域をはみ出して表示」だそうなのですが、IE6は「領域を広げて表示」してしまっているのでした。なのでFirefoxの方が正しい表示をしていたわけです。


overflow: hidden;
boxok.gif


overflow: visible;
boxng.gif
posted by ほえ at 11:36| Comment(0) | TrackBack(0) | XHTML+CSS | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。