とても簡単なことだが、CSSを今回初めて ちゃんと触ったので、
上下に並んだ<div>..</div>を左右に配置させる方法について残しておく。
例えば、HTMLが下記のような場合に、
<html>
<head>
<title>CSSテスト</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="testsite">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</div>
</body>
</html>
CSS（今回の場合、test.css）で、以下のようにすると、
CSS（スタイルシート）
# testsite {
}
# 1 {
}
# 2 {
float: left;
}
# 3 {
float: right;
}
# 4 {
}
"2"の右側に、"3"が入りこみ
画面上、横並びに表示できる。
また、その際、マージンと余白についても考慮するなら、
マージン指定 ｛ margin: [マージンの長さ]; ｝
余白の指定 ｛ padding: [余白の長さ]; ｝
枠の指定 ｛ border: [線の太さ] [線のスタイル] [線の色]; ｝
のように指定する。
※コンテンツと枠の間にある間隔が余白（padding）。枠の外側部分がマージン（margin）。
背景色や背景画像を設定した場合は、枠の内側に適用され、マージン部分は透過色となるので背景は付かない。
・マージン（margin）の指定において、
{ margin 10px; }のように
上下左右の４方向について、すべて同じマージンを指定することもできるが、
個別に、{ margin 10px 15px 10px 15px; }（margin（上）（右）（下）（左））
などと、上下左右のマージンをそれぞれ別に指定したり
{ margin-top 10px; } 、{ margin-bottom 10px; }、
{ margin-left 10px; }、{ margin-right 10px; }
などと、特定の場所のマージンだけ指定したりすることもできる。
・余白（padding）に関してもマージンと同じように指定できる。
・枠（border）の指定における線のスタイルとしては
none :枠線なし
solid :実線
double :二重線
dotted :点線
などがある。