Dreamweaver div size - html-lists

Question

I'm trying to make my first website in Dreamweaver, and I've run into a problem I can't seem to fix. I have a div containing an unsorted list, and the elements of the list are rollover images. There are 5 images, so I have 3 on the first line and 2 on the second line. They are sized to be a certain percentage of the page.
I want the div to extend down to the end of the bottom row of images automatically, I do not want to have to hard code the value for the size. I have the div size set to auto, but it does not seem to recognize the images in the unsorted list. It is sizing its self to 0, so all the images are overlaying everything that comes after the div.
If I manually resize the div it fixes the problem, but I'm not sure I want to do this.
Is there anyway to fix this issue without hard coding the height of the div?
Here is the html code for the list of roll over images..
<div id="rolloverlocs">
<ul>
<li><img src="images/Davie.jpg" alt="" width="" height="" id="Image1"></li>
<li><img src="images/Kits.jpg" alt="" width="" height="" id="Image2"></li>
<li><img src="images/Denman.jpg" alt="" id="Image3"></li>
<li><img src="images/Kits.jpg" alt="" width="" height="" id="Image4"></li>
<li><img src="images/Denman.jpg" alt="" width="" height="" id="Image5"></li>
</ul></div>
And for this part of the css style sheet ..
#rolloverlocs ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: auto;
display: block;
}
#rolloverlocs img {
width: 31%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
float: left;
border-style: solid;
border-color: #000000;
background-color: #E5E9E2;
height: auto;
}
#rolloverlocs {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: auto;
}

Answer 1

try add this style:
#rolloverlocs ul {
overflow:hidden;
}
demo
or you can use this:
html,body{
width:100%;
}
*{
margin:0;
padding:0;
}
#rolloverlocs ul {
list-style: none;
width: 100%;
display: block;
overflow:hidden;
}
#rolloverlocs li{
display:block;
float:left;
width:33%;
}
#rolloverlocs a{
display:block;
width:100%;
height:auto;
}
#rolloverlocs img {
width:94%;
margin:1%;
display: block;
background-color: #E5E9E2;
height: auto;
padding:2%;
}
#rolloverlocs {
width:100%;
}