✔ mehrere div's vertikal ausrichten

[herrgarnele]

Guten Morgen liebe Tutorials-Gemeinde!

Ich hab mal eine total doofe Frage:
Wie kann ich es anstellen, dass ich zwei in einem 'Rahmen-div' liegende Elemente vertikal ausrichte- eins an der Oberkante und eins an der Unterkante des 'Rahmen-div's'?

Also vom Grundgerüst so:

<div id="rahmen"">
    <div id="oben_ausgerichtet"></div>
    <div id="unten_ausgerichtet"></div>
</div>

Ich hab mir nun schon einen Wolf gesucht, daher hoffe ich dass die Frage hier nicht schon zum x-ten Mal auftaucht..

 

[soyo]

Guten Morgen, versuch mal das:

#rahmen {
  height: 500px;
  width: 600px;
  position:absolute;
  top: 50px;
  left: 100px;
}
#oben_ausgerichtet {
  margin-top: 0px;
  height: 50px;
  width: 60px;
}
#unten_ausgerichtet {
  top: 400px;
  height: 50px;
  width: 60px;
  position: relative;
}

 

[Maik]

Lösungsvorschlag:

#rahmen {
position: relative;
border: 1px solid #000;
min-height: 100px;
height: auto !important;
height: 100px;
}

#oben_ausgerichtet {
margin-top: 0;
}

#unten_ausgerichtet {
position: absolute;
bottom: 0;
}

<div id="rahmen">
    <div id="oben_ausgerichtet">oben</div>
    <!-- Optionales Element, um das Box-Verhalten bei zunehmenden Inhalt zu demonstrieren -->
    <!--<div id="content">
             <p>content</p>
             <p>content</p>
             <p>content</p>
             <p>content</p>
             <p>content</p>
             <p>content</p>
             <p>content</p>
             <p>content</p>
             <p>content</p>
             <p>content</p>
             <p>content</p>
    </div>-->
    <div id="unten_ausgerichtet">unten</div>
</div>

Das optionale DIV #content demonstriert, daß die Box #rahmen bei zunehmenden Inhalt ihre Höhe verändert und das "Footer"-DIV nach unten wandert.

 

[soyo]

Du bist eindeutig zu langsam! ... Aber deine Lösung ist um einiges eleganter.

 

[Maik]

Du bist eindeutig zu langsam! ... Aber deine Lösung ist um einiges eleganter.

Gut Ding will Weile haben

 

[herrgarnele]

Soyo, Michael,

Dankeschön an Euch beide!
Genauso hab ich mir das vorgestellt!!
Da frag ich mich nur- warum komm ich da net selber drauf?

Wieauchimmer- DANKE!!