IE7 nechápe CSS pro FF, IE6, Operu

Zdravím,
tak jsem si zkusil IE7 a jsem zmaten.

Když se podíváte na http://www.yard.cz/photo.php, tak menu jde pod dolní DIV s informacemi "pod čarou". Obrázek je úplně mimo mísu. Přitom v ostatních prohlížečích se vnitřní DIV natáhne a obrázek je správně umístěn na dolní hranu tohoto DIVu. Stránku posílám v tom nejkratším možném tvaru včetně CSS. Nevíte, co se IE7 nelíbí? Díky.

<div id="PageBox">
<div id="TitleBox"><h1>Yard.cz</h1></div>

<div id="MainBox">
<div id="MenuBox">
<h2 class="Hidden">Menu</h2>
<ul>
<li><a href="photo.php" title="Fotografie [ALT+F]" accesskey="f">&nbsp;Fotografie</a></li>
<li><a href="text.php" title="Texty [ALT+T]" accesskey="t">&nbsp;Texty</a></li>
</ul>
<hr class="Hidden" />
</div>

<div id="DataBox">
<h2>Fotografie</h2>
<div id="UnderMenu">
<ul>
<li>Fotografie</li>
<li>Galerie</li>
</ul>
</div>

<div class="MyImage" id="Intro"></div>
</div>

<div id="InfoBox">Informace pod čarou</div>
</div>

CSS pak třeba u MyImage je:

<style>
.MyImage{
background-image: url("img/dvojice.png");
background-position: bottom left;
background-repeat: no-repeat;
width: 100%;
height: 200px;
}

#DataBox {
font-weight: normal;
font-size: 9pt;
font-style: normal;
letter-spacing: 0.08em;
word-spacing: 0.04em;
text-decoration: none;
text-align: left;
color: #000000;
background-color: #FFFFFF;
border-left: 1px #400000 solid;
border-right: 1px #400000 solid;
width: 659px;
min-height: 300px;
padding: 5px 5px 5px 5px;
margin: 0px 0px 0px 0px;
float: left;
overflow: visible;
}
</style>

Přesto se třeba obrázek nepozicuje k DIVu s id="MainBox".
A DIV s id="DataBox" se neprotáhne podle vnořeného textu ...

Dík Jarda