Moin,
also, wenn ich dich richtig verstehe willst du zwei container nebeneinander haben, einen mit fixer Breite und der andere soll immer den restlichen zur Verfügung stehenden Platz einnehmen (horizontal) und sich nicht unterhalb der gefloatenden navi auf die ganze Breite des Viewports ausdehnen.
Außerdem soll das Ganze möglichst flexibel sein.
Ich hab dir ein lauffähiges Beispiel gemacht damit du siehst wie es funktioniert:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> </title>
<style type="text/css">
* {
padding:0;
margin:0;
}
#wrapper {
margin-left: 14em;
}
#navigation {
float:left;
width:14em;
background:lime;
margin-left: -14em;
}
#text {
background:silver;
float: left;
width: 100%;
}
ul {
padding:2em 1em;
}
li {
list-style-type:none;
}
p {
margin:1em;
}
#footer {
clear:both;
height:0.1px;
font-size:0;
line-height:0;
}
</style>
<!--[if IE]><style type="text/css">
* html #navigation {
display: inline;
}
</style><![endif]-->
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul id="navi">
<li><a href="#">Startseite</a></li>
<li><a href="#">Eine Muh,</a></li>
<li><a href="#">eine mäh,</a></li>
<li><a href="#">eine täterätätä,</a></li>
<li><a href="#">Noch'n Punkt</a></li>
<li><a href="#">Und noch einer</a></li>
</ul>
</div>
<div id="text">
<p>Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen
und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den
Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi. Die Tastempfindung geht
auch ins Sexuelle. Das bedeutet nicht unbedingt, daß das Verhältnis zum Gummibärchen ein geschlechtliches wäre, denn prinzipiell
sind diese geschlechtsneutral. Nun sind Gummibärchen weder wabbelig noch zäh; sie stehen genau an der Grenze. Auch das macht
sie spannend. Gummibärchen sind auf eine aufreizende Art weich. Und da sie weich sind, kann man sie auch ziehen. Ich mache das
sehr gerne. Ich sitze im dunklen Kino und ziehe meine Gummibärchen in die Länge, ganz ganz langsam.</p>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
Alles anzeigen
Einfach in deinen Editor reinkopieren und im Browser betrachten.
Der umschließende #wrapper bekommt ein margin-left mit der Breite von #navigation.
In diesen freigewordenen Bereich wird #navigation mittels negativem margin-left reingezogen.
#navigation und #text floaten damit sie nebeneinander stehen.
Einen clearenden #footer habe ich der Ordnung halber definiert.
#navigation bekommt noch per CC für den IE6 display:inline; (double-margin-Bug!) 
Hoffe ich hab dich richtig verstanden.
koslowski
edit. Der von dir gewählte Doctype ist nicht sonderlich brauchbar. Bei diesem Doctype ( XHTML 1.1) ist der content-type nicht text/html sondern applikation/xml. Damit hat derIE6 und kleiner ein Problem. Besser ist z.B. der Doctype in meinem Beispiel (XHTML 1.0 strict), damit bist du im always Standard-Mode.
