Jeden div neroztahuje druhy

Ahoj, prosim vas o par rad. Toto je kod:

<center>
<div class="real">


<div class= "realdiv2"></div>

<div class= "pozadidiv">


<div class= "nadpisdiv">
Nadpis
</div>



</div>


<div class= "realdiv3"></div>
</div>
</center>


stylopis:
.real {width: 800px;
position: relative; margin:auto;
}

.pozadidiv {width: 800px;
position: relative;
background-image: url('bocnice.bmp');
height:100%;
}

.nadpisdiv {width: 720px;
height: 225px;
position: absolute; top:0px; left: 40;
background-color:black;
z-index: 15;
}

.realdiv2 {width: 800px; position: relative; height: 45px;background-image: url('hornirohy.gif')}
.realdiv3 {width: 800px; position: relative; height: 45px;background-image: url('dolnirohy.gif')}


Tak moje prvni otazka zni proc se mi neroztahuje pozadidiv pri vlozenem nadpis div. Cerny ramecek je na strance a zobrazuje se mi zde jen realdiv2 arealdiv3 vlatne realdiv 2 a 3 je obrazek hornich a dolnich zaoblenyhc rohu a pozadivit je pas 800px douheho obrazku.

Druha otazka je jesli by to neslo udelat nejak elegantneji.

Diky az rady