
ちょっとハマったのでメモしておきます。
htmlとcssはこんな感じ。
<div id="box1"> <div id="box1-inner">BOX 1</div> </div> <div id="box2">BOX 2</div>
#box1{
width: 100%;
position: absolute;
}
#box1-inner{
width: 400px;
margin: auto;
border: solid 4px red;
}
#box2{
width: 200px;
height: 300px;
margin: auto;
border: solid 4px blue;
}
いろいろ試しててわかったのは、
「margin:auto」と「position:absolute」の組み合わせで発生するようです。
他にも条件はあるかもしれませんが。
「position:absolute」が次の要素の「margin」の影響を受けるのなら、間に別の要素を挟んでしまえばよいと思い立ち、下記のようにしてみました。
<div id="box1"> <div id="box1-inner">BOX 1</div> </div> <!-- 空のDIVを挟む --> <div id="box2">BOX 2</div>
釈然としないものがありますが、とりあえずこれで解決しました。(´ワ`)
![]() |
現場のプロから学ぶXHTML+CSS CSS Nite 毎日コミュニケーションズ 2008-11-11 |
コメントはまだありません。