HTML

<div id="side">

<div class="side-banner-area">
<p><img src="img/240-140.jpg" width="240" height="140" alt=""/></p>
<p><img src="img/240-140.jpg" width="240" height="140" alt=""/></p>
</div>

<div class="side-category-area">
<div class="side-category-layout">
<h3>タイトル</h3>
<p>テキスト<br>テキストテキスト</p>
<ul>
<li><h3>タイトル</h3>
<h4>カテゴリー1</h4>
<ul>
<li><a href="#">┣項目1</a></li>
<li><a href="#">┣項目2</a></li>
<li class="last"><a href="#">┗項目3</a></li>
</ul>
</li>
<li>
<h3>タイトル</h3>
<h4>カテゴリー2</h4>
<ul>
<li><a href="#">┣項目1</a></li>
<li><a href="#">┣項目2</a></li>
<li><a href="#">┗項目3</a></li>
</ul>
</li>
<li>
<h4>カテゴリー3</h4>
<ul>
<li><a href="#">┣項目1</a></li>
<li><a href="#">┣項目2</a></li>
<li><a href="#">┗項目3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

CSS

.clear{ clear:both;float:none;}
#side{ line-height:3em;}
#side a{color:#333333; text-decoration:none;display:block;}
#side a:hover{color:#222222; text-decoration:underline;}
#side{font-size:80%;width: 240px;text-align: center;}
#side h3{background-color: #333333;	color: #FFFFFF;	text-align:center;padding-top:1%;padding-bottom:1%;margin:0;}
#side h4{padding:0;margin:0;}
#side ul li a{border-bottom: 1px dotted #333333;}
#side ul li .last a{border:none;}
#side ul li a:hover{background-color: #EEEEEE;}
.side-banner-area{ background-color:#FFFFFF;}
.side-banner-area p img{width:100%;height:auto;}
.side-category-layout{width:96%;padding:2%;margin-right: auto;margin-left: auto; text-align:left;}
.side-category-area{}
.side-category-area ul{ list-style:none;margin:0;padding:0;}
.side-category-area li{ list-style:none;margin:0;padding:0;}