AOUR配列のサイトはひとまずシングルカラムのシンプルなデザインでリニューアルをしてみたところだが、最終的には２カラムのレイアウトにしてみたいと思っているので、また久々にCSSでfloatで配置するやりかたを色々と試してみている。
だがこれが、いまだに難しい。
思うように回り込まなかったり、幅を固定すると当然、特定の環境以下では表示に不都合が生じたりする。
それでもどれか一つのブラウザだけで実現するなら容易いのだが、IE8など、まだ結構昔のブラウザも残っているので、それでも表示できるようにと考えると、かなり無理があるのだ。たとえばIE8はHTML5の要素をほとんど理解しないので、その要素にCSSを組み込んでも機能しないため、従来通りdiv要素を用いたりしなければならない。
そもそも幅を指定しないとfloatがうまく働かないとか、親要素の幅指定の必要性だとか、それを絶対値pxにするか相対値％にするかだとか。一方の配置をpositionで固定するかしないか、あるいは一方を右フロートにするかなどもある。
自分でも、これまで幾つかのサイトを作ってきたが、様々な方法での２カラムがあって、もうどれが良いのか。
http://desperadoes.biz/style/dan/
結局はここを参考に、本文領域を％指定で幅可変対応。本文領域のマージンを使い、メニューバー領域を空けるほうほうによることとした。