Wie krieg ich 3 nebeneinanderliegende div-Container auf eine Länge?
FL4PJ4CK am 10.01.2009 um 0:56 Uhr
Ich mach gerade meine Anfänge im manuellen HTML-Coding und hab zunächst mal versucht, meine alte mit NetObjects Fusion (Code-Generator) erstellte Website nachzubauen. Jedoch nicht wie bisher mit Tabellen, sondern mit divs. Es hat fast alles geklappt, jetzt hängt es noch daran, dass ich Navi, Content-Bereich und Sidebar jeweils in einem div habe und ich will diese jetzt alle auf eine Länge kriegen - nämlich bis zum Footer. Hier mal der Link: http://tinyurl.com/8agw59
Ich hoffe ich hab mir nicht schon alle Möglichkeiten verbaut und ihr findet eine Lösung, Danke und schönen Abend noch, Nico
Antworten
Dieses Problem mit der gleichen Höhe von nebeneinander angeordneten Containern ist in CSS leider ein bekanntes Problem, es lässt sich nämlich nicht einfach lösen. Es gibt zwar die Möglichkeit, für alle Container die gleiche Höhe anzugeben, aber bei dynamischen Inhalten kann das zu Problemen führen.
Eine weit verbreitete, wenn auch nicht elegante Lösung ist es, mit sogenannten "Faux Columns" zu arbeiten (siehe Google oder hier):
http://die.netzspielwiese.de/blog/css/2006-10/css-faux-columns-bzw-unechte-spalt...
Da du aber keinen Abstand zwischen den einzelnen Boxen zu brauchen scheinst, empfiehlt sich die Lösung mit dem Wrapper von Keimling. Ich würde da aber dem Wrapper einfach die gleiche Hintergrundfarbe geben wie den inneren Divs (dann sieht man nicht, dass die Divs eigentlich vorher zu Ende sind).
Du kannst außenrum nen wrapper div legen und die höhen der anderen divs auf 100% stellen.
FL4PJ4CK am 10. Januar 2009 01:32 hm, das kapier ich nich so ganz. Was ist denn wrapper, ist das ein bestimmter Container? Also wenn ich einfach einen großen Div um die drei Spalten lege und die Spalten height:100%; setze passiert garnix...
Keimling am 10. Januar 2009 02:11 ne ein ganz normaler div nennt man nur wrapper, weil r die anderen drei einhüllt. Unten noch ne zweite variante
Die %-Angaben funktionieren nur, wenn auch das jeweils äussere Element eine %-Angabe hat. Also müsstest du bis zum <html> Element 100% als Höhe definieren, das heisst zum Beispiel <html style="height:100%"> <head>...</head> <body style="height:100%"> <div style="height:100%"> <div style="height:100%"> Navigation </div> <div style="height:100%"> Content </div> <div style="height:100%"> Sidebar </div> </div> </body> </html>
Aber dann ist die Länge ja nicht mehr variabel :(
O.K. Zweite Möglichkeit: definiere als hintergrundbild für den neuen div, den du um die drei divs gebildet hat einfach das Bild, das ich hochgeladen habe. Dann sind die Divs zwar nicht wirklich so hoch - aber es sieht so aus.
Kannst ja auch mal mit border experimentieren.
<style type="text/css"> html, body { margin: 0pt; padding: 0pt; font-size: 100.1%; font-family: Arial,Helvetica,sans-serif; } p { font-size: 0.88em; margin: 10px; padding: 0pt; } (Raute)main { border-left: 200px solid #cccccc; border-right: 200px solid #cccccc; width: 560px; margin-left: -480px; left: 50%; position: absolute; } (Raute)left { margin-left: -200px; width: 200px; float: left; width: 560px; float: left; } (Raute)right { margin-right: -200px; float: right; width: 200px; } (Raute)content { float: left; width: 560px; } .clear { clear:both; font-size: 0.1em; } </style>
<body> <div id="main"> <div id="left"><p>left</p></div> <div id="content"><p>content</p></div> <div id="right"><p>right</p></div> <div class="clear"> </div> </div> </body>
Sorry für das Raute, aber sonst ist der Text so komisch formatiert.
Auf die gleiche Höhe bekommst du sie ganz einfach, indem Du jedem div eine height- Eigenschaft mitgibst. Die misst Du am längsten Objekt. Problematischer wirds, wenn die Höhe dann bei anderen Seiten variiert und Du sie dynamisch anpassen willst. Um bei allen Browsern auf Nr. Sicher zu gehen, hilft dann eigentlich nur, den css- Wert heigth dynamisch zu erstellen - da ist aber leider schon nix mehr mit einfachem HTML. Meine Lösung - ich nehme ein Hintergrundbild, dass die Begrenzer bereits enthält und das die ganze Fläche bis zum Footer ausfüllt (background-repeat:y-repeat) und gebe den "echten" divs einen transparenten Hintergrund. Dann sieht es so aus, als seien sie gleich lang.
FL4PJ4CK am 11. Januar 2009 01:04 Ne, also die Methode mit der festn Höhe fällt raus. Schon auf der oben gepostetetn Seite ist ja mit dem Kommentar-Script ein dynamischer Inhalt dabei, der die Seitenlänge ständig verändert mit jedem neuen Eintrag.
Hab mir jetzt eigentlich gedacht, dass ich das alles in ein div packe und dem div die Backgroundfarbe der Seitenboxen gebe. Da kommen dann noch die Außenrahmen rein, die inneren Rahmen kommen in den Content-div. Aber das hat irgendwie nicht funktioniert bisher. Die Hintergrundfarbe wurde aus einem geheimnisvollen Grund nicht angezeigt oO.
Oh ich sehe gerade, der IE zeigts so an wie ich das gerne hätte, der Firefox nicht. Wie kommt das denn? oO
Keimling am 11. Januar 2009 16:49 Browser Bugs - der ie zeigt css fehlerhaft an - siehe auch acid test
Würde es mal mit style="display:inline" probieren...
FL4PJ4CK am 11. Januar 2009 23:36 Also das mit dem Wrapper-div will einfach nicht funktionieren. Ich hab jetzt um alles (von headzeile bis einschließlich footer) in den div gepackt und der div wurde mit folgenden eigenschaften belegt:
<div class="container">
.container { margin:0 auto; width:774px; height:auto; background-color:#CCD5C5; border-top:1px solid #9DA597; border-right:1px solid #9DA597; border-left:1px solid #9DA597; }
aber das funktioniert einfach nich... könnte mal jemand über den quelltext schauen?
@DetektivConan: Wie genau meinst du das? Hab jetzt nachgelesen, dass ich damit zum Beispiel p-Tags in inline-Elemente verwandeln kann, also den Zeilenumbruch verhindern. Inwiefern kann ich das bei meinem Problem einsetzen?
Dieses Problem lässt sich - wie so vieles - über JavaScript bewältigen. Auf der Seite http://webprogrammierung.detektiv-conan.ch/FL4PJ4CK.html findest du ein Beispiel und den zugehörigen Quellcode.
Das Beispiel habe ich unter der Annahme erstellt, dass der Content-Bereich der grösste ist. Also wenn es nicht sicher ist, welches der grösste Bereich (Navigation, Content oder Sidebar) ist, musst du das Script etwas umschreiben...
FL4PJ4CK am 1. Februar 2009 00:49 hi, das sieht ja ziemlich gut aus. hab das problem zwar inzwischen nicht mehr, aber ich speicher mir die Seite mal ab, werd ich sicher bald wieder Verwendung für finden. Vielen Dank!
Noch nicht die richtige Antwort? Dann hier in allen Fragen und Tipps suchen:
Neu hier?
Jetzt kostenlos registrieren
und gutefrage.net vollständig nutzen.
5 Antworten pro Minute
Jetzt entdecken!
Bilder zum Thema HTML
Bilder zum Thema CSS
hi ohrflieger, das mit dem Wrapper-div hab ich eigentlich schon probiert und das hat nicht so richtig geklappt. Aber wahrscheinlich hab ich irgendwo was falssch gemacht, ich werd das nochmal probieren. Vom Prinzip her ist mir klar wie es funktionieren würde und klingt auch relativ logisch so. Ich sag dann Bescheid, obs geklappt hat. Danke auf jeden Fall, Nico