Boxen nicht ineinander?

[Homwer]

Hallo,
ich bastel gerade an einem layout. Ich habe eine äußere Box für die mittige Platzierung, einen Header und ein linkes menü rechts content.

#wrapper {
margin:0 auto;
width: 980px;
border:1px solid #000000
}

#header {
width: 980px;
height: 200px;
}

#navigation {
float: left;
width: 30%; }
#contents {
width: 70%;
float: right;
min-height:70%;
}

Der äußere Rahmen "wrapper" hat einen Rahmen bekommen, leider liegen #navigation und #content nicht innerhalb dieses rahmens sondern dadrunter.
Wie kann man das beheben?

 

[SpiceLab]

Wie kann man das beheben?

Zu diesem x³-vorgestellten Problem gibt's gebührend hier im CSS-Forum vom Ex-Mod einen CSS - FAQ-Eintrag zum knapp drei Jahre alten Beitrag im Webmaster-FAQ-Board.

6. Warum passt sich die Boxenhöhe nicht dem Inhalt an?

D'rum: Augen auf im Forenverkehr ;-)

 

[Homwer]

leider funktioniert die im FAQ gezeigte Lösung nicht (mehr) ?

 

[SpiceLab]

leider funktioniert die im FAQ gezeigte Lösung nicht (mehr) ?

Dann ist dir bei der Umsetzung ein Fehler unterlaufen.

Bei mir funktioniert sie erwartungsgemäß noch immer.

<div id="wrapper" class="clearfix">
    <div id="header">header</div>
    <div id="navigation">navigation</div>
    <div id="contents">contents</div>
</div>

/* Ergänzung zu deinem CSS */
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */