Div layers makker ikke ret!

eller også er jeg en elendig programmør :P


Jeg prøver at lave et nyhedsscript hvor det hele skal styres af layers (selvfølgelig ;) ), men jeg kan ikke få den til at makke ret, jeg ønsker at lave et specielt layout ved overskrifterne

Jeg ønsker at overskrifterne skal bestå af 2 kolonner, den til højre skal være 210 bred og 75 høj

venstre kolonne skal deles op i 3 kolonner, alle 40 bred

-1 40 høj
-2 20 høj
-3 15 høj

Jeg har prøvet følgende:

html fil:
* * *

<div id="Nyhedsboks">
    <div class="Dato">
        <div class="Dag">
            12</div>       
        <div class="Maaned">
            DEC</div>
        <div class="Aar">
        2004</div>
        </div>
    <div class="Overskrift">
        <h1>Ny side lavet!</h1>
    </div>
</div>

* * *
css fil:
* * *

#Panoramaboks    { background-image: url(Billeder/Panorama.jpg); z-index: 2; top: 0; left: 0; width: 100%; height: 100px }

#Nyhedsboks    { background-image: url(Billeder/Nyhedsboks.jpg); position: absolute; z-index: 2; right: 0; width: 250px; height: 500px; float: left; overflow: auto }

#Centerboks      { background-image: none; position: absolute; z-index: 2; right: 250px; left: 150px; width: auto; height: 500px; float: left }

#Menuboks      { line-height: 50px; background-image: url(Billeder/Menu.jpg); list-style-type: circle; position: absolute; z-index: 2; left: 0; width: 150px; height: 500px; float: left }

#Bundboks    { background-image: url(Billeder/Bund.jpg); position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 40px; float: none }

.Dag { font-size: 30px; position: relative; z-index: 4; top: 0; right: 210px; left: 0; width: 40px; height: 40px }

.Maaned { font-size: 15px; font-variant: small-caps; position: relative; z-index: 4; top: 0; right: 210px; left: 0; width: 40px; height: 20px }

.Aar { font-size: 10px; position: relative; z-index: 4; top: 0; right: 210px; left: 0; width: 40px; height: 15px }

.Overskrift { font-size: 20px; font-variant: small-caps; margin: 0; padding: 0; position: relative; z-index: 3; top: 0; right: 0; left: 40px; width: 200px; height: 70px; float: left; overflow: hidden }

.Dato { margin: 0; padding: 0; position: relative; z-index: 3; top: 0; right: 210px; left: 0; width: 40px; height: 75px; float: left }


den viser de 3 layers under hinanden korrekt, men det sidste layer som skal være til højre for de tre, vises under de 3. Hvad er fejlen?