■ 絶対位置指定のサンプル

このページでは、2つの汎用ブロックレベル要素を横に並べて表現しています。それぞれに背景色を設定しているので、お分かりになると思います。

絶対位置を指定することによって、このようなレイアウトを設計することが可能です。

前のページに戻る

このページのCSS 
div#side { 
  position:   absolute;
  top:        4em; 
  left:       6%; 
  padding:    1em; 
  background: #ffc; 
  color: #000;
  border: 1px solid #000
 }

div#main { 
  position:    absolute;
  top:         4em; 
  left:        21em; 
  right:       6%
  padding:     1em; 
  background:  #cff; 
  color: #000;
  border: 1px solid #000
 }