246

view

floatさせるのは<li>だけだと思います。floatが終わったら解除を忘れないでください。この場合は<li>のfloatが終わる</ul>の前で解除 clear:both; することになります。これにはclearfixと呼ばれるスタイルを適用する方法があります。
専門家の回答があるまでのご参考として
#container{
width:920px;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#ffffff;
}
#header{
background-image:url(aoimiyazaki.png);
background-repeat:no-repeat;
height:400px;
}

ul,li,p,h2,h3,h4 {
margin:0px;
padding:0px;
}
#menu {
}
#menu li {
list-style-type:none;
line-height:35px;
width:184px;
text-align:center;
float:left;
}
#menu li a {
display:block;
text-decoration:none;
background-color:#6633ff;
color:#ffffff;
border-right:dotted 1px #ffffff;
}
#menu li a:hover {
opacity:0.7;
}

#shouhinn {
}
#shouhinn h2 {
font-size:18px;
margin:10px 15px;
}
#shouhinn h3 {
font-size:16px;
margin:10px 15px;
}
#shouhinn ul {
background-color:#f5f5f5;
}
#shouhinn li {
list-style-type:none;
height:100px;
width:420px;
float:left;
margin:10px;
padding:10px;
background-color:#ffffff;
}
#shouhinn li p.photo {
float:left;
margin:0 10px 0 0;
}
#shouhinn li p.photo img {
vertical-align:bottom;
}
#shouhinn li p.title {
font-size:16px;
margin-bottom:5px;
}
#shouhinn li p.text {
font-size:14px;
margin-bottom:5px;
}
#shouhinn li p.price {
font-size:16px;
}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; }
*:first-child+html .clearfix { zoom: 1; }
--></style>

<div id="container">
<div id="header">
</div>

<div id="menu">
<ul class="clearfix">
<li><a href="#">会社案内</a></li>
<li><a href="#">商品案内</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">アクセス</a></li>
<li><a href="#">企業情報</a></li>
</ul>
</div>

<div id="shouhinn">
<h2>商品案内</h2>
<h3>ケーキを中心とした商品です</h3>

<ul class="clearfix">
<li><p class="photo"><img src="xx.jpg" width="100px" height="80px"></p>
<p class="title">りんご</p>
<p class="text">ミカンが食べたい/p>
<p class="price">450円</p></li>
<li><p class="photo"><img src="xx.jp" width="100px" height="80px"></p>
<p class="title">りんご</p>
<p class="text">ミカンが食べたい</p>
<p class="price">450円</p></li>
<li><p class="photo"><img src="xx.jp" width="100px" height="80px"></p>
<p class="title">りんご</p>
<p class="text">ミカンが食べたい</p>
<p class="price">450円</p></li>
</ul>
</div>