border」によるCSSレイアウトの崩れを防ぐ－初心者が作る初心者の為のホームページ作成講座

　レイアウトをデザインする

レイアウトを区切るラインを「border」によって表示させた場合ＣＳＳレイアウトが崩れてしまうことがあります。
これは「border」を指定したことで、「site-box」の幅が、「box-1」と「box-2」を横に並べたときの横幅より狭くなることで崩れてしまうのです。

width:800pxに対して「border」を指定することで、border:1px （左右で2px）も含まれてしまうので実際は、width:798pxになりレイアウトの崩れの原因とらります。

つまり、「border」をレイアウトを構築している「div」に指定する場合は、「border」の幅を含めて、「width」を指定する必要があるんです。

この講座では「width」を800pxで指定しているので、
800px（width）＋2px（border　の左右）＝802pxがbodyの幅となります。

今回の講座ではwidth:800pxでもレイアウトの崩れが無かったのでそのままのbodyを800pxのまま続けますがもし「border」の指定で崩れるようであれば「body」に「border」のサイズ分をプラスして下さい。

ホームページ　ソース

XHTML(HTML)

</div>

</body>

</html>

CSS（スタイルシート）

#body {
      width :800px ;
      border: 1px solid #9acd32;
      }

#box-1 {
border-bottom: 1px solid #9acd32;
}

#box-2 {
      float : left;
      width :200px;
      }

#box-3 {
      float : right;
      width :600px;
      }

#box-4 {
      clear: both;
      width: 800px;
      }