aeolus: Positionierung von Div's

Liebe Forumgemeinde!

Ich stehe - nachdem ich nun knappe 5 Jahre vom ganzen HTML/CSS-Geschehen abstinent war - vor einem kleinen Problem:

Konkret geht es um die Positionierung verschiedener Div-Elemente. Im Prinzip hab' ich 3 Div's, welche alle ineinander verschachtelt sind:

  
<div class="nummereins">  
 <div class="nummerzwei">  
   Inhaltstext ...  
 </div>  
 <div class="nummerdrei">  
   Fußzeile  
 </div>  
</div>  

Das div-Element der Klasse "nummereins" stellt mir meinen Container dar, der mir die nachfolgenden Inhalte an die grundsätzliche gewünschte Position bringt:

  • mittig und zentriert, wobei die Höhe von "nummereins" 100% des Browserfensters (sprich des html und/oder body-Tags) betragen soll.

Prinzipiell funktioniert ja alles ganz gut. - Ich habe nur ein kleines Problem damit, die Elemente "nummerzwei" und "nummerdrei" zu positionieren.

Die Fußzeile - Element "nummerdrei" - soll dabei immer 6em vom unteren Browserrand entfernt sein. - Egal wie viel Text im Element "nummerzwei" steht. Ebenfalls unabhängig vom Text, soll "nummerzwei" immer direkt an "nummerdrei" anschließen - selbst wenn nur eine Textzeile in ihm vorhanden ist.

Ist beispielsweise viel Text in "nummerzwei" vorhanden, so soll das Element nach unten ausgedehnt werden und darf "nummerdrei" vor sich herschieben, allerdings mit der "Auflage", dass nach "nummerdrei" immer noch 6em Platz zum unteren Browserfensterrand sind.

... Ich hoffe, ihr versteht ungefähr was ich meine? - Mit den CSS-Eigenschaften "min-height" etc. hab' ich mich schon herumgespielt, aber irgendwie komm' ich auf keinen grünen Zweig. ... anscheinend vergisst man innerhalb von 5 Jahren leider doch einiges, was man 'mal wusste.

Also kurz zusammengefasst: "nummereins" soll immer 100% Höhe des Browserfensters haben (folglich oben und unten bündig anschließen), an "nummerzwei" (welches margin-top von 6em bekommt) soll direkt "nummerdrei" anschließen, wobei nach "nummerdrei" immer 6em Platz zum unteren Browserrand gelassen werden soll.

Liebe Grüße aus Frankreich,
à bientôt,

aeolus

  1. Hi,

    Konkret geht es um die Positionierung verschiedener Div-Elemente. Im Prinzip hab' ich 3 Div's, welche alle ineinander verschachtelt sind:

    <div class="nummereins">
    <div class="nummerzwei">
       Inhaltstext ...
    </div>
    <div class="nummerdrei">
       Fußzeile
    </div>
    </div>

      
    Die sind nicht „alle ineinander verschachtelt“.  
      
    
    > Das div-Element der Klasse "nummereins" stellt mir meinen Container dar, der mir die nachfolgenden Inhalte an die grundsätzliche gewünschte Position bringt:  
    >   
    > - mittig und zentriert, wobei die Höhe von "nummereins" 100% des Browserfensters (sprich des html und/oder body-Tags) betragen soll.  
      
    Mit HTML und BODY hast du bereits zwei Containerelemente. Also kann „nummereins“ wahrscheinlich entfallen.  
      
    
    > Ist beispielsweise viel Text in "nummerzwei" vorhanden, so soll das Element nach unten ausgedehnt werden und darf "nummerdrei" vor sich herschieben, allerdings mit der "Auflage", dass nach "nummerdrei" immer noch 6em Platz zum unteren Browserfensterrand sind.  
      
    Dass das nicht in allen Fällen erfüllbar ist, sollte dir klar sein.  
    Also definiere zuerst, wie die Ausnahme behandelt werden soll.  
      
    MfG ChrisB  
      
    
    -- 
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?