IE - Div-Höhe spinnt

[Luke]

Hi,
Ich bin echt ratlos; Die Situation ist folgende: Ich habe eine Überschrift umschlossen von 2 DIVs (eigentlich sind es 5 DIVs (Hintergrund + 1 für jede (abgerundete) Ecke, aber der Fehler tritt schon bei 2 DIVs auf). Darunter befindet sich ein weiteres DIV. Die Überschrift und das DIV unter der Überschrift haben padding. Jetzt das komische: Das erste, also das äußerste DIV das die ÜBerschrift Umschließt hat plötzlich eine riesige Höhe und fließt in das darunterleigende DIV, es drückt es aber nicht runter, sondern liegt mit seiner Höhe unter dem anderen DIV!

Der Sourcecode ist ganz simpel:

HTML:

<div class="entry_title_top_right"><div class="entry_title_bottom_right"><h2><a href="#">Insanely Interesting Blogentry</a></h2></div></div>  
<div style="padding:20px;">blah</div>

CSS:

.entry_title_top_right {  
 background: url('images/greenbar_topright.gif') no-repeat top right #FF0000;  
}  
  
.entry_title_bottom_right {  
 background: url('images/greenbar_bottomright.gif') no-repeat bottom right #8ac503;  
  
h2 {  
 color: #FFFFFF;  
 font-size: 16px;  
 font-weight: bold;  
 padding: 6px 10px 6px 10px;  
 margin: 0px;  
}

Wenn ich das padding der Überschift auf 0px setze zeigt er mir's wie gewünscht an, wenn ich das padding der darunterliegenden DIVs entferne verkleinert er das rote DIV so als ob es das darunterliegende DIV umschließen würde!

Ich kapier's nicht. Habt ihr ne idee?

Greets
Luke

PS: Tantek-Hack geht glaub ich nicht weil ich hier keine feste Höhe angeben kann, die Überschrift kann nämlich unterschiedlich lang sein.