まずレイアウトは大きく2つに分けるとテーブルレイアウトとCSSレイアウトがあり、現在主流となっているのがCSSレイアウトです。どちらの方法でレイアウトしても一長一短あり、テーブルレイアウトはウェブブラウザによる表示の差が殆ど無くデザインがくずれにくいメリットがある反面、テーブルの中にテーブルを大量に入れ子していくと表示が遅くなるデメリットがあります。逆にCSSレイアウトは表示が速いとされている反面、ウェブブラウザの解釈の違いによってデザインが大きく崩れる事があります。
さて、テーブルレイアウトが複数の升目でレイアウトするのに対し、CSSレイアウトは一つのボックスという箱枠をいくつも並べていく感覚でレイアウトしていきます。殆どのホームページではこのボックスにDIVを使う事が多いようで、このホームページも例外にもれずDIV病と言ってもいいほど大量にDIVが使われています（＾＾； ボックスにはコンテント、パディング、ボーダー、マージンという領域があり、それぞれが独自の役割を持っています。
コンテント領域はテキストや画像などを入れる領域で、高さや横幅を指定できます。パディング領域はボーダーからコンテントまでの余白になり、背景色や背景画像を指定する場合はパディング領域を含めて反映されます。ボーダー領域は枠線になり、上下左右に実線や点線を指定する事ができます。マージン領域は周囲との余白になり、これも上下左右にそれぞれ指定する事ができます。
ここまでは簡単なんですが、これらのボックスを並べていく時に問題となってくるのが、Internet Explorer（以下IE）とそれ以外のウェブブラウザとのボックスの領域の使い方の違いです。具体的な例を出すと最初に横幅200pxのボックスを作り、右側にパディング50px、ボーダーを10px指定した場合、IE以外のウェブブラウザはボックスの横幅サイズを260pxとして表示します。
しかしIEは既存のボックスのサイズを差し引いてパディングとボーダー領域を表示する為、コンテント領域が140px、パディングとボーダー領域を合わせて200pxのボックスとして表示します。
この問題を回避する方法ですが、IE 6以降は互換モード（過去の規格に合わせる仕様）と標準モードがあり、DOCTYPE宣言を見て表示モードが切り替わるようになっています。そしてIE 6以降は標準モードの場合、パディングやボーダーも他のウェブブラウザのように既存のボックスサイズに加算して表示するようになるので、標準モードで表示させるようにすればいいわけです。
私が未熟な為、DOCTYPE宣言の詳しい記述方法までは理解できていませんが、下記のようなDOCTYPE宣言にシステム識別子とされるアドレス部分までが入っていれば、IE 6以降は標準モードで表示するようです。
DOCTYPE宣言は、どの規格でHTMLが書かれているかをウェブブラウザに伝えるものなので、実際に記述されているHTMLとDOCTYPE宣言が違えば、これまた表示が崩れる原因になります。これに関する詳しい説明は私には荷が重いので、ご自身で調べてみて下さい。
ここからはボックスの配置をちょっとだけ説明します。ボックスを単純に縦に並べていくだけなら難しくはないのですが、「float」プロパティを使う事で左右に並べる事ができます。例えば「float : left」と指定する事で、指定された要素は左側に表示され後に続く要素は右側に回り込みます。逆に「float : right」を指定すれば右側に表示され、後に続く要素は左側へ回り込みます。
ここでもIEとFirefoxなどのブラウザでは解釈の違いがあってブロック要素（DIVやPのように一行全部を使い切る要素）が続いてもIEなら回り込んで表示されるのに対し、Firefoxなどでは回り込みません。そこで続くブロック要素の方にも「float」を入れておく必要があります。
後に記述してある要素の回り込みを止めさせるには「clear」プロパティを使用します。左側の解除には「left」、右側は「right」、そして両方を一度に解除する場合に「both」を使います。
最後はかなり簡素になってしまいましたが、これでスタイルシートの説明を終了させて頂きます。