HTMLもCSSもこんな複雑な書き方したら、後で泣きますよ。HTMLは文書構造だけ、プレゼンテーションと住み分けを徹底しましょう。そうすると将来、あるいはスマホ用にメニューを、そのまま、あるいは横に並べたくなってもHTMLは触らなくて良いです。 [HTML]タブは全角スペースに置換してある。 <div class="header"> 　　<h1>タイトル</h1> </div> <div class="section"> 　　<h2>本文見出し</h2> 　　<p>本文記事</p> 　　<div class="section"> 　　　　<h3>見出し</h3> 　　</div> 　　<div class="nav"> 　　<ul> 　　　　　　<li><a href="A.html" title="○○"><img src="images/test1.png" width="200" height="39" alt="○○" /></a></li> 　　　　　　<li><a href="B.html" title="○○"><img src="images/test2.png" width="200" height="35" alt="○○" /></a></li> 　　　　　　<li><a href="C.html" title="○○"><img src="images/test3.png" width="200" height="35" alt="○○" /></a></li> 　　　　　　<li><a href="D.html" title="○○"><img src="images/test4.png" width="200" height="35" alt="○○" /></a></li> 　　　　　　<li><a href="E.html" title="○○"><img src="images/test5.png" width="200" height="35" alt="○○" /></a></li> 　　　　　　<li><a href="F.html" title="○○"><img src="images/test6.png" width="200" height="35" alt="○○" /></a></li> 　　　　</ul> 　　</div> </div> <div class="footer"> 　　<h2>文書情報</h2> </body> </div> [CSS] html,body{margin:0;padding:0;width:100%;height:100%;}/* html,bodyの余白を消す */ /* 全体の配置 */ div.section h2,div.section p,div.section div.section{ margin:0 auto 0 210px; width:auto; } div.section h2{line-height:2em;} div.nav ul,div.nav ul li{ display:block;list-style:none; margin:0; padding:0; } /* ナビゲーション */ div.section div.nav{ width:200px;height:100%; /* ナビのサイズ */ position:absolute;/* 絶対配置(基準はstatic以外の親ブロック) */ top:0;left:0;/* 位置 */ background-color: #FFF;/* 背景 */ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; } div.nav ul{ width:100%;/* 巾(基準はstatic以外の直近の親ブロック) */ } /* 万が一画像が読み込まれないときのため */ div.nav ul li{ line-height:39px; } div.nav ul li+li{ line-height:35px; } div.nav ul li a{ display:block;/* blockに変更 */ width:100%;height:100%;/* サイズ(基準はstatic以外の直近の親ブロック)*/ text-decoration:none; out-line:none; /* border:outset 2px gray ;*//* 枠が必要なら(liのサイズをborder巾分小さくする) * } /* 画像もブロックにしておく(liサイズに合うように) */ div.nav ul li a img{border:none;display:block;width:100%;height:100%;} /* 他の部分 */ html,body{background-color:silver;} div.header,div.section,div.footer{ width:80%; margin:0 auto; background-color:rgb(220,220,220); } div.header h1,div.footer h2{ margin:0 auto;line-height:2em;} } div.header,div.footer;{min-height:100px;} div.section{min-height:300px;position:relative;} /* ナビを横にしたけりゃ div.header,div.footer;{min-height:100px;} div.section{min-height:300px;position:relative;} div.section div.nav{ width:100%; text-align:center; } div.section div.nav li{ display:inline-block; width:16%; } div.section h2{padding-top:20px;} div.section h2,div.section p,div.section div.section{ margin:0 auto; */ 以上 floatにすると、文書構造も変える必要がでてくるのでabsoluteにしてある。 リストを横並びにするときは、li{display:inline;}として、ul{text-align:center;}が良い。その場合改行やタブを<!---->でコメントアウトする。 [例] 　　<ul> 　　　　　　<li><a href="A.html" title="○○"><img src="images/test1.png" width="200" height="39" alt="○○" /></a></li><!-- 　　　　--><li><a href="A.html" title="○○"><img src="images/test1.png" width="200" height="39" alt="○○" /></a></li> [CSS]下記を追記するだけで横になるはず div.section div.nav{ width:100%; } div.section div.nav li{ display:inline-block; }