自作の一段組みのソースを使い、二段組みのサイトを
作っているのですが、サイドメニューまでは、containerにきちんと表示されるのですが、それ以下のmainがcontainerから30px分ぐらい、左に切れた状態で表示されます。
以下がソースです。なお、所々、一段組みのソースのままになっているところがあり、かつ、かなり長いですが、ご了承ください。最終的には、サイドメニューをフロートレフト、メインをフロートライトにして、二段組みにする予定です。
～html～
<!-- コンテナ -->
<div id="container">
<!-- ヘッダー -->
<div id="header">
<h1 style="display:none">タイトル</h1>
<ul id="topmenu">
<li class="logo1"><a href="#">お問い合わせ</a></li>
<li class="logo2"><a href="#">サイトマップ</a></li>
</ul>
</div>
<!-- サイドメニュー (スワップイメージを使っています)-->
<div id="menu">
<ul>
<li><a href="#"><img src="images/button/top.jpg" alt="トップページ" width="254" height="71"id="Image1" onmouseover="MM_swapImage('Image1','','images/button/sw-top.jpg',1)" onmouseout="MM_swapImgRestore()"/></a></li>
<li><a href="#"><img src="images/button/eve.jpg" alt="トップページ" width="254" height="71"id="Image2" onmouseover="MM_swapImage('Image2','','images/button/sw-eve.jpg',1)" onmouseout="MM_swapImgRestore()"/></a></li>
※以下省略
</ul>
<div>
<!--main-->
<div id="main">
<div id="introduction">
<h2><img src="images/introduction.png" alt="introduction" /></h2>
</div>
<!-- コンテンツ -->
<div id="content">
<h2>h2タイトル(1)</h2>
<dl class="info">
<dt>1月1日</dt>
<dd>あああ</dd>
<dt>1月2日</dt>
<dd>いいい</dd>
※以下省略
</dl>
<h2>h2タイトル(2)</h2>
<dl class="info">
<dt>1月1日</dt>
<dd> ううう</dd>
<dt>1月2日</dt>
<dd>えええ </dd>
※以下省略
</dl>
</div>
<!--contentsはここまで-->
</div>
<!--mainはここまで-->
<!-- フッター -->
<div id="footer">
<ul id="lastmenu">
<li class="logo3"><a href="#">よくある質問</a></li>
<li class="logo4"><a href="#">プライバシーポリシー</a></li>
</ul>
<p>Copyright BBB. All right reseved.</p>
</div>
</div>
<!--containerはここまで-->
～css～
body {background-image: url(images/sora.jpg)}
/* コンテナ */
div#container {background-image: url(images/background0.png);
width: 980px;
margin-left: auto;
margin-right: auto;
overflow:hidden;
position:relative}
/* ヘッダー */
div#header {background-image: url(images/header.png);
background-repeat:no-repeat;
height: 169px;
margin-bottom: 30px}
ul#topmenu {font-size: 1.2em;
padding-left: 580px;
padding-top: 130px}
ul#topmenu li {float:left;
margin-left:15px;
margin-right:15px;
font-weight:bold}
.logo1 {list-style:none;
background-image: url("images/mail.png");
background-position: left center;
background-repeat: no-repeat;
padding-left:35px}
.
logo2 { list-style:none;
height:25px;
background-image: url("images/zisyaku.png");
background-position: left center;
background-repeat: no-repeat;
padding-left:30px }
/* メニュー */
#menu {margin-left: 40px;
width:260px}
#menu li{list-style:none;
margin-bottom: 4px}
/* メイン */
div#introduction {margin-left: 132px;
margin-bottom: 10px}
/* コンテンツ */
div#content {width: 475px;
border: 2px solid #400000;
padding-top: 28px;
padding-right: 60px;
padding-left: 50px;
padding-bottom: 20px;
margin-left: 135px;
margin-bottom: 80px;
font-weight: none;}
div#content h2 {color: #400000;
font-size: 1.8em;
letter-spacing: 0.5em;
border-bottom-width: 3px;
border-left-width: 14px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #008080;
border-left-color: #008080;
padding-left: 10px;
margin-bottom: 15px}
dl.info dt,dl.info dd {font-size:1.2em;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #400000}
dl.info dt {clear: left;
float: left;
padding-left: 17px;
color: #000;
width:8.2em;
background-image: url("images/yazirusi2.gif");
background-position: 0% 58%;
background-repeat: no-repeat;}
dl.info dd {margin-bottom: 0.8em;
margin-left: 9.2em;
margin-bottom: 1.5em}
/*メインはここまで*/
/* フッター */
div#footer {background-image: url(images/footer.gif);
position:absolute;
bottom:0px;
height:60px;
width:980px;}
※以下省略。
