2009.04.05
理由を忘れた2改
さてネガティブマージンを使った2カラムについての続きでございます。
現行
先行float:left(#side_colum)の左ボックスにfloat:leftした340pxの右ボックス(#center_colum)を重ねた。
右ボックス(#center_colum)のmargin-leftに-340px(ネガティブ)のマージンを与え、内容の子boxのマージンで左スペースを確保。
問題点
- IE6で「widthを明示した親ボックス」からはみ出した「ネガティブマージンを持つ子ボックス」のネガティブマージン分がレンダリングされない。
- IE6にfloatさせた方向と同じ方向のmarginを2倍とるバグがあり、もしかしたら-680pxもマージンをとっていたりして、中のdivの内容のマージンにより、結局左ボックスの上に重なって、内容表示されているのではないかという危惧。
IE6環境が無いので、確認とれませんが。
家人のIE7環境もHDDすっとびにより、確認してません…(;e;)
1年保証がちょうど切れたタイミングっす。ソニータイマーが入っていたようです。
さて、対策。
1.に関しては親ボックスにはwidth与えないことで対応。
そもそもfloatされたボックスはmarginが理由ではみ出さないし、内容の子boxは正マージンなんでとりあえずは問題なしみたいです。
まあ、すごくはみ出すので気になってしまったと言う気持ち的な問題は、このへんで解決。「その位置は決して包含ブロックの内部だけに制限されるものではなく、外にはみ出しても構わない。」参考
次は、問題点2.のfloatと同じ方向のmarginを考察。
IE6の「floatした方向と同じ方向のマージンが二倍」のバグを危惧しましたが、後続のボックスがfloatである場合、そのボックスのマージンは正常にとられるようです。
でも一つ目にfloatしたボックスのマージンはやはり二倍。
だがしかし、一つ目のfloatにマイナスマージンを設定しなければ無問題。
使える方法であることはわかりましたが、後で忘れると思うので汎用性を持たせたいと思います。
今まで、後続の右ボックスfloat:leftに対して、margin-left:のmarginを取っていたので、
反対方向のmarginをとることに。
しかし、右ボックスの右マージン辺を移動したところで、先行floatボックスの右マージン辺に対して、後続floatボックスの左マージン辺が追随するので、意味がありません。
でも、float:leftなんで、右マージン辺を移動したい。
と言うわけで、
左ボックスの右marginにネガティブになってもらおうと思います。
1 |
#side_colum {margin-right:-340px;} |
左ボックスの右マージンが左端にあれば、右ボックスの左マージン辺が追っかけてきてボックスが重なります。
内の人の位置をmargin:leftで調整。ここは前のcssと同じです。
以前は、リンクさせる要素(h4)に対して下記の指定をしてますたが、
1 2 |
position: relative; z-index: 2; |
cssが煩雑になるのと、IEのマイナスマージンの不審行動対策で左ボックス(#side_colum)のcss自体に記述。
IE6でどうなるか判りませんが…とりあえず。
変更はハイライトの部分だけです。便利ねー。
1 2 3 4 5 6 7 8 9 10 11 |
#side_colum { width:340px; float: left; margin-right: -340px; position: relative; z-index: 2; } #center_colum { width: 710px; float: left; } |
スポンサーリンク
コメントをどうぞ