★ 最大幅:1000pxでそれ以上は左/右/中央カラムがまとまってフロートするページサンプル
中央カラムに<float: right:>を指定することで、中央カラムを先に左カラムを後に記述することが出来る。
Window幅を変えて 1000px以下なら、右カラムは中央カラムの下に移動する
680px以下なら、左カラムが一番上に、中央がその下、右は非表示となる
注意点:
■ リンク先の表示をページ途中にする
<-- left end
right end -->
このページはヘッダー固定のページで、ページ内リンク(アンカー)がヘッダーの影に隠れないようにする CSS のサンプル
通常、ページトップ~途中にページ内リンクを設定し、そのリンク先にジャンプすると、そのリンク先はページトップのヘッダーの裏側に表示されて見えなくなってしまう。
アンカーを <a name="jump"> ではなくて、 ブロック要素に id="jump" style="margin-top:-○px; padding-top: ○px; として負のマージンと同量の正のパディングを指定すると隠れないように出来る。
★ float を指定した要素の隣接要素の margin の注意点
float:left を指定した P要素
margin:30px 0 20px 30px;
で 上左30px、右0 のマージンを指定
隣接するこのブロックに margin: 20px を指定した。
width: ○○ px margin: ○ px
を指定すると、左マージンは親要素の左端起点で計算されて、float要素の右端未満だと右端から margin: 0 で表示されてしまい設定が効かないように見える。
周囲の赤い点線が親要素のボーダーライン
margin: 20px 0 0 250px; で、
左マージン=float要素の幅+float要素の左マージン+目的のマージン を指定した場合のレイアウトで20pxの間隔が得られる
float:left を指定した P要素
margin:0 30px 20px 30px;
で右 30px のマージンを指定
このブロックに margin-left: 20px; を指定しても相殺されるが、左の float指定した要素に右マージンを指定するとその分の間隔は得られる
左側の float要素の高さが過ぎると左側の float要素の下マージンが切れた次の行から回りこむ
注意: float を指定したブロック要素の幅よりも 狭い<左マージン+幅>の空要素を並べると隠れて見えないことがある。
1
2
3
4
5
contents end contents end to top to middle to middle2