Platzierung von div Containern

div#content sollte sich auch innerhalb von div#box befinden

Leider zersprengt die Seite, wenn ich das Browserfenster verkleinere.

Das liegt daran, dass du flexible Breiten (Angaben in Prozent) mit festen Breiten (Angaben in pixel) mischst. Dem Browser bleibt dann gar nicht anderes übrig, als die Inhalte übereinander zu schieben, wenn das Browserfenster verkleinert wird.

Eien Lösung wäre, auch div#box eine feste Breite zu vergeben. so dass die darin enthaltenen Elemente genug Platz darin finden.

Außerdem ist der Contentbereich durch das Hinzufügen der zwei Boxen irgendwie weiter nach unten gerutscht. Warum?

Weil das rechte margin von .content2 von insgesamt 900 px für ein Float nicht mehr genug Platz lässt.

Ich möchte aber, dass der Header den gesamten Browser (von der Breite) einnimmt.

Dann sollte sich aber auch der Rest entsprechend anpassen.

Wenn du möchtest, dass sich das Layout an die Bildschirmgröße anpasst, ist das schon etwas aufwendiger umzusetzen als ein klassisches fixes Layout. Unter dem Suchbegriff "Responsive Webdesign" lassen sich aber sicher einige brauchbare Anleitungen hierzu finden und vielleicht auch Templates, die du als Ausgangsvorlage für deine Seite nehmen kannst.

.content2 {
    background-color: #FFFFFF;
    border: 1px solid;
    clear: both;
    float: right;
    margin: 15px 0 0;
    width: 200px;
}

Mit dem "clear: both;" hebst du den vorgehenden Float auf, so dass das Element wieder unterhalb angezeigt wird

Siehe auch:

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear

Also du möchtest zweierlei:

1. dass Content-Container und Navigation nebeneinander angeordnet werden

2. dass die einzelnen Content-Container untereinander angeordnet werden

Das erreichst du dadurch, dass du die Content-Container in einen Eltern-Container packst, welcher dann mit der Navigation floaten kann. Die Kind-Container werden dann ganz normal untereinander angeordnet. Clearen solltest du erst nach dem Eltern-Container - ggf. mit einem leeren div

<div id="navi">
    <!-- Navigation -->
</div>
<div id="content">
    <div>
        <!-- Content 1 -->
    </div>
    <div>
        <!-- Content 2 -->
    </div>
    <div>
        <!-- Content 3 -->
    </div>
</div>
<div class="clear"></div>

#navi {
    float: left;
    width: 120px;
}
#content {
    float: right;
    width: 550px;
}
.clear {
    clear: both;
}