CSS Frage

Ich habe auf einer Seite folgende Elemente

<div id="div0" class="list1">

<ul">
<li>da steht was</li>
<li>da steht was</li>
<li>da steht was</li>
</ul>
</div>

und diese CSS Definition

.list1 {
height:300px;
background-color:#666666;
float:left;
padding:10px;
}

ul {
display:block;
height:40px;
}

In dem Div sollen später ganz oben und ganz unten 2 Grafiken erscheinen. Die Breite des Divs soll aber Variabel sein, da der Inhalt nicht immer die gleiche Breite hat.

Mein Problem ist, das die Liste im Firefox immer den minimalen Platz einnimmt. Im IE sprengt sie mir aber das Div, sobald ich ihr eine definierte Höhe zuweise. Dann nimmt das Div 100% der Seite ein.

Wie schaff ich es, das dies nicht geschieht?

Ja es hat auch nur im IE nicht funktioniert. Wenn man darüber nachdenk, ist es nicht ganz eindeutig.

Im Augenblick hab ich es ohne Grafiken gelöst, was sowieso in dem Fall besser ist.

Was jedoch in der aktuellen Version noch aufgefallen ist.
Das Div rund um die Liste, nimmt nicht wirklich die beste Breite ein.
<div>
<ul>
<li><a>asd</a></li>
</ul>
</div>
Die Liste nimmt nicht die Breite von den Ankern ein und somit ist das Div auch zu klein. Siehe Anhang.
Ich hab es mit etwas paddin bei li gelöst, nur warum tritt das überhaupt auf? Ist doch unlogisch oder?