nicht angemeldet
float Boxen auf die ganze Seite "verteilen" & 2 Spalten Modell
0 0 0 0 0
float Boxen auf die ganze Seite "verteilen" & 2 Spalten Modell
Hallo Leute,
hab eine Frage zum Thema CSS:
Ich habe ein Design erstellt, was nach folgendem Muster unten aufgeführt ist (stark vereinfacht). Ich möchte gerne, dass die Navigation eine feste größe hat (hier 200px) und die beiden DIVs content_left & content_right sich den restlichen Fensterinhalt dynamisch teilen. Beide Boxen (content_left & content_right) sollen hierbei gleich groß sein und sich an die Fenstergröße anpassen.
Ist das möglich?
Ich habe schon das 2/3 Spaltenmodell von http://www.alistapart.com/articles/holygrail (und diverse andere) ausprobiert, allerdings zickt da mal wieder der IE 6 rum. Sowieso entstehen viele Probleme erst wegen dem IE - aber das ist eine andere Geschichte....
Würde mich über Antworten freuen - auch wenn ihr ein 2 Spaltenmodell kennt, was einfach aufgebaut ist und in der aktuellen Browsergeneration funktioniert.
Gruß
Sabrina
Mein Code:
<html>
<head>
<style type="text/css">
.container {}
.navigation { float: left; width: 200px; }
.content {float: left;}
.content_left { float: left;}
.content_right {float: left;}
</style>
</head>
<body>
<div class="container">
<div class="navigation">
Navigation
</div>
<div class="content">
<div class="content_left">Content-Left</div>
<div class="content_right">Content-Right</div>
</div>
</div>
</body>
</html>
-
Ist das möglich?
natürlich - guck dir die wikipedia startseite an - da ist der inhaltsbereich zwar mit einer tabelle in 2 spalten geteilt, aber es spricht nichts dagegen, diese durch 2 nebeneinander floatende divs zu ersetzen, die jeweils 50% breit sind
-
Bei Wikipedia ist das allerdings mit einer Tabelle gelöst worden... nicht ganz so schön meiner Ansicht nach...
Ist das möglich?
natürlich - guck dir die wikipedia startseite an - da ist der inhaltsbereich zwar mit einer tabelle in 2 spalten geteilt, aber es spricht nichts dagegen, diese durch 2 nebeneinander floatende divs zu ersetzen, die jeweils 50% breit sind-
Bei Wikipedia ist das allerdings mit einer Tabelle gelöst worden... nicht ganz so schön meiner Ansicht nach...
ich zitiere mich mal selbst:
aber es spricht nichts dagegen, diese durch 2 nebeneinander floatende divs zu ersetzen, die jeweils 50% breit sind
<div id="inhalt">
<div id="spalte1">blah</div>
<div id="spalte1">blub</div>
</div>#spalte1, #spalte2 { float: left; width: 50%; }
-
Genau das funktioniert aber ja nicht... das ist sozusagen mein Problem:
Folgender Code funktioniert nicht, da content zuvor eine Größe zugewiesen werden muss! Weist man dem div 100% zu stimmt das nicht, da es eigentlich 100% minus 200px sind. und 100%-200px kann man leider nicht in die CSS Datei schreiben ;)
<html>
<head>
<style type="text/css">
.container {}
.navigation { float: left; width: 200px; }
.content {float: left; }
.content_left { float: left; width:50%; }
.content_right {float: left; width:50%; }
</style>
</head><body>
<div class="container">
<div class="navigation">
Navigation
</div>
<div class="content">
<div class="content_left">Content-Left</div>
<div class="content_right">Content-Right</div>
</div>
</div>
</body>
</html>Bei Wikipedia ist das allerdings mit einer Tabelle gelöst worden... nicht ganz so schön meiner Ansicht nach...
ich zitiere mich mal selbst:
aber es spricht nichts dagegen, diese durch 2 nebeneinander floatende divs zu ersetzen, die jeweils 50% breit sind
<div id="inhalt">
<div id="spalte1">blah</div>
<div id="spalte1">blub</div>
</div>#spalte1, #spalte2 { float: left; width: 50%; }
-
Hi!
Hast Du dem content schonmal nen 200px breiten Rand an der Seite verpasst und dann das Menu darin absolut mit -200px positioniert?
-
Ach. Content sollte natuelrich relativ positioniert werden. Fuer alle Faelle.
--
"Sei froh dass du nen Virenscanner hast, der schlauer ist als du..."
-
Genau damit experimentiere ich gerade rum...
ist zwar nicht die Ideallösung (wirft wieder andere Probleme auf), aber funktioniert zu mindestens ;)Danke für die schnelle Hilfe!
Ach. Content sollte natuelrich relativ positioniert werden. Fuer alle Faelle.
-
-
-
-
-
-