DIVs nebeneinander mit festem Abstand ausrichten

[Der Hans]

Ich bin gerade dabei, eine Webseite zu bauen, die im Groben auf drei Bereichen aufbaut: Header, Navigation und Content, ungefähr so angeordnet:



Dabei sollen zwischen den einzelnen DIVs jeweils 10px frei sein, nach Möglichkeit sollte dieser freie Platz unabhängig von der Größe der einzelnen DIVs (vor allem der Navigation) sein.

Bisher konnte ich es nur über feste Größenangaben für die Navigation und einen dementsprechend großen margin-left für den Content-Bereich lösen, aber das muss doch auch anders zu regeln sein.

So sieht mein CSS momentan aus, wie man sieht habe ich als margin-left für den Content die Gesamtbreite des Navi-DIVs angegeben:

.header {
    height: 30px;
    padding: 10px;
    margin: 10px;
}

.navigation {
    width: 150px;
    margin: 0px 10px;
}

.content {
    margin: 0px 10px 10px 170px;
    padding: 10px;
}

Ich möchte mich bei der Navigation allerdings eigentlich nicht auf einen festen Pixelwert festlegen und dementsprechend den Freiraum dynamisch mit dem Content-DIV füllen (mit oben angesprochenem 10px-Abstand zu allen Seiten, nach oben und rechts ist das kein Problem).

Edit: Habe gerade gemerkt, dass der Thread besser im eigenen CSS-Bereich aufgehoben wäre. Könnte den jemand verschieben? Danke.

 

[threadi]

Wieso willst Du die Navigation nicht auf einen festen Pixelwert festlegen? Der Bereich braucht doch eine Breite um angezeigt werden zu können. Soll es eine dynamische Breite sein? Abhängig von .. was?

 

[Der Hans]

Meine Idee war, dass sich die Breite der Navigation an der Länge des längsten Menüpunktes orientiert und ich bei nachträglich eingebauten, längeren Menüpunkten die Breite nicht manuell ändern muss.
Die manuelle Änderung ist ja eigentlich auch kein großer Akt, aber ich kann mir nicht vorstellen, dass es da keine automatisierte Lösungsvariante für gibt. ;)

 

[threadi]

Dir geht es also nicht um eine variable Breite sondern eine variable Höhe?

Dann solltest Du dir mal faux columns anschauen, eine Technik die es erlaubt 2 Block-Elemente per CSS so zu stylen, dass sie gleich lang sind - egal in welchem von beiden mehr Inhalt ist.

 

[Der Hans]

Nein, um die Höhe geht es mir nicht (die passt sich automatisch an und unterhalb der Navigation schließt auch nichts anderes an), mir geht es um die Breite der Navigation. Nehmen wir an, dass ich ein Menü mit den Punkten "Home" und "Exit" habe, dann würde dieses Menü bei automatischer "Breitenzuweisung" relativ schmal sein und nicht mehr Platz als nötig einnehmen. Füge ich jetzt einen Punkt "Inhaltsverzeichnis" hinzu, soll das Menü in seiner Breite automatisch an die nun benötigte Breite angepasst werden (damit der Text nicht aus dem Menüpunkt hinaus in den Contentbereich läuft), ohne dass ich manuell eingreifen muss.

 

[threadi]

Achsoooo, dann floate mal die Navigation ohne eine Breite anzugeben. Auch darin enthaltene Elemente sollten keine Breite angegeben haben.

 

[Der Hans]

Auch darin enthaltene Elemente sollten keine Breite angegeben haben.

Ah, da hatte sich doch tatsächlich noch eine Pixelangabe in einem anderem Element versteckt, hätte man drauf kommen können.

Bleibt noch die Frage, wie man es bewerkstelligen kann, dass der Content 10px neben dem Navi-DIV beginnt und 10px vor dem rechten Seitenrand aufhört. Ich bekomme momentan nur einen der beiden Fälle hin.
Der korrekte Abstand zur Navi (margin beim Navi-DIV eingestellt) wird gehalten, wenn ich den Content floate, ohne Breitenangabe ist der DIV dann aber natürlich auch nur so breit wie der Inhalt.
Den korrekten Abstand zum rechten Rand bekomme ich hin, wenn ich den Content nicht floate und die Abstände nur über margin angebe, wobei dadurch die automatisierte Ausreichtung an der Navi nicht gegeben ist.
Eine Idee, wie ich die beiden Seitenabstände richtig zusammenkriege?

 

[threadi]

margin: 0 10px;

sollte doch klappen?

 

[Der Hans]

Nicht so wirklich. Wie ich schon geschrieben habe, bekomme ich den Content entweder links oder rechts richtig hin.

 

[threadi]

Achso, "oder" .. unter welcher Bedingung soll der Browser denn entscheiden wo der Abstand nun gesetzt werden sollte? Im einfachsten Fall müsstest Du das pro Seite einzeln unterscheiden (z.B. durch setzen einer entsprechenden Klasse).