xhtml+cssのレイアウト センタリング カラム落ち
xhtml+cssレイアウト超初心者です。
何か間違っている所があれば教えてください。
よろしくお願い致します。
【問題点】
１）全体がセンタリングにならない
□□■■■■■□□
□□■■■■■□□
□□■■■■■□□(左右の中央にしたい)
２）subがカラム落ちしてしまっている？
mainとsubの下に『スト』という文字が入ってしまっています。
【cssソース】
@charset "Shift_JIS";
* {margin: 0;
padding: 0;
}
body {color: #000000;
font-size: 62.5%;
}
/*==wrapper==*/
div#wrapper {
width: 950px;
margin : 0 auto;
}
/*==heaber==*/
div#heaber {
width: 950px;
margin-bottom: 30px;
background-color: #66CCFF;
}
/*==contents ==*/
div#contents {
width: 950px;
float: left;
background-color:#66CCFF;
}
/*==main ==*/
div#main {
width: 740px;
margin-right: 20px;
float: left;
background-color:#6699FF;
}
/*==sub ==*/
div#sub {
width: 190px;
float: left;
background-color:#6666FF;
}
/*==siteinfo ==*/
div#siteinfo {
clear: both;
width: 950px;
background-color:#6633FF;
}
【HTMLソース】
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<link rel="stylesheet" media="tv, screen, projection, print" href="css/import.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p>テキスト</p>
<p>テキスト</p>
</div><!--/header-->
<div id="contents">
<div id="main">
<p>テキスト</p>
<p>テキスト</p>
</div><!--/main-->
<div id="sub">
<p>テキスト</p>
<p>テキスト</p>
</div><!--/sub-->
</div><!--/contents-->
<div id="siteinfo">
<p>テキスト</p>
<p>テキスト</p>
</div><!--/siteinfo-->
</div><!--/wrapper-->
</body>
</html>
お礼
どうもありがとうございました。