nicht angemeldet
Hallo zusammen!
Um euch nicht mit langweiligen Einführungen zu langweilen, gleich das Problem...
Folgende Situtation: Ich habe ein Container namens wrapper, der in der mitte der Seite zentriert ist. Nun möchte ich in diesen zwei weitere Container einfügen, einer für den Inhalt, der andere für die Navigation.
+-----------------------------+
| |
| +-------------+ +------+ |
| | | | | |
| | Inhalt | | Navi | |
| | | | | |
Nun, die div's sind erstellt, es tritt jetzt aber das Problem auf, dass wenn ich z.B. die Navi nicht in den ersten Container rein bringe. Wenn ich beide innern container float, verschwindet der äusserste Container.
Wenn ich nur die Navi mit right floate (float: right), ist zwar der Inhalt im äussersten Container drinn, die Navi bleibt aussen rechts. Zur illustration: http://www.mypage.bluewin.ch/Hermes/div.htm
Meine Frage: Wie bring ich den Inhalt und die Navigation in den äussersten Container hinein? Der 'Übercontainer' soll zentriert sein und die gleiche länge haben wie der längste container in seinem inneren (Inhalt oder Navi). Der Inhalt soll links, die Navi rechts sein.
Die Ausgangsversion, wie oben schon gesagt, habe ich temorär hochgeladen: http://www.mypage.bluewin.ch/Hermes/div.htm
Herzlichen Dank für eure Hilfe!
Code fürs Forumsarchiv:
<!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">
<head>
<title>div...</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex,nofollow" />
<style type="text/css" media="screen" /><!--
body {
background-color: #555;
color: #aaa;
font: 11px Verdana, Arial, sans-serif;
}
#wrapper {
background: #555;
color: inherit;
margin: 25px auto 11px auto;
width: 760px;
border: 1px solid #777;
}
#content, #sidebar {
background-color: #666;
color: inherit;
border: 1px solid #777;
padding: 11px;
margin: 25px;
text-align: justify;
}
#content {
width: 30%;
margin: 0;
padding: 0;
}
#sidebar {
width: 30%;
float: right;
}
--></style>
</head>
<body>
<div id="wrapper">
<div id="content">
<p>ich möchte, dass die Sidebar auch im div-container <i>wrapper</i> drinn ist und zwar rechts vom container <i>content</i> (dieser container).</p>
</div>
<div id="sidebar">Sidebar</div>
</div>
</body>
</html>