Box ausdehen bis zur nächsten

[Defkil]

Hey,
ich möchte ein kleine Template erstellen das ein Header hat, 2 Boxen in der Mitte nebeneinander und ein Footer. Nur mein Problem ist, das wenn in einer Box der Inhalt mehr ist bei der anderen, das der Footer nach oben geht. Wie könnte ich das machen?
Mein jetziger Code
CSS

#wrapper {
    width: auto;
}
#header {
    background-color: blue;
    width: 100%;
    float:top;
}
#steuerung {
    background-color: yellow;
    width: 60%;
    float:left;
}

#zweite_spalte {
    background-color: green;
    float:right;
    width: 40%;
}
#footer {
    background-color: red;
    width: 100%;
    float:button;
}

und das HTML:

<div id="wrapper">
    <div id="header">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,     
    </div>
    <div id="steuerung">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
    </div>

    <div id="zweite_spalte">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div>
        <div id="footer">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    </div>
</div>

Danke an Alle!

 

[Banana_Jones]

Ich würde die beiden divs Steuerung und zweite_spalte in ein umschließendes div packen und diesem ein "clear: both" zuweisen. Außerdem gibt es die Angabe "float: button" nicht. Entweder "left", "right", oder "none"

 

[Tronjer]

- Ein width: auto auf dem wrapper bringt wenig.
- der footer braucht ein clear: left.
- float: button gibt es nicht.