2段組みのデザインパターンで煮詰まってしまった。
全幅のヘッダの下を2段に分け、左に幅200pxのメニューを配置して右に幅無指定で本文を配置、一番下に全幅でフッタを表示させたいのだが、これをpositionでやってもfloatでやっても不具合が生じる。
- メニューを本文より後に記述したい
メニュー部が先に配置されていればwidth: 200px; float: leftですべて片付く実際には本文にメニュー幅を除外した幅を本文に指定しないと100％幅となってしまい回り込まない。そうするとメニュー幅を％指定するか全体幅を固定とするしかないが、どちらも問題があるのでこの方法は採用できないのだが、SEOなどを考慮すればサイドメニューは本文より後に置きたい。そうするとfloatは本文幅を固定しない限り不可能で、しかもウィンドウ幅が広いとメニューと本文の間に広く隙間が生じてしまう。- フッタはサイドメニューまたは本文のすぐ下に表示したい
- positionで位置調整を行うとその下のフッタはヘッダのすぐ下に出現してしまう。そうしない為には本文またはサイドメニュー内の一番下に入れるしかないが、それでは入れた方が短かった場合にその上からコンテンツが重なり、具合が悪い。
どうしようか。フッターを消すか、あるいは本文下への表示にするか。
テーブルレイアウトしてしまえば話は簡単なのだが、そうしないのはプライドという事で。
