[ERLEDIGT] div vertikal ausrichten ohne Überschneidung

[Kaffeebart]

Hallo

ich habe jetzt recht lange gegoogelt und selber versucht ohne das gewünschte Ergebnis zu erhalten.

Ich habe ein Layout was inetwa so aussieht:



Also Header und Footer (jeweils fixe Grösse) dazwischen horizontal 3 divs. (Die wurden begrenzt mit top und bottom, sodass sie immer genau auf Höhe Header Footer beginnen)
Soweit habe ich auch alles hinbekommen.

Jetzt will ich im rechten div unten einen Login Bereich machen. Der Bereich über dem Login (nennen wir es NEWS) darf das Login aber nicht überschneiden.

Ich hoffe ihr versteht was ich mir wünsche.

Das Problem das ich nun dabei habe ist scheinbar, dass der Login immer unten sein soll und der News Bereich immer oben anfängt. (nur eine Vermutung)
Lasse ich die Angabe wie unten stehen kann es sein, dass die News einfach in das DIV Login rein wandert und beide sich so überlagern.
Ich kann dem NEW-Bereich aber auch keinen Bottom Wert zuweisen, da ich diesen ja nicht kenne (jenachdem, welche Ansicht der Nutzer hat variiert das ein wenig // ausserdem wird der Login Bereich nach dem login kleiner erscheinen, da weniger Optionen)

Ich hab mir ja gedacht sowas könnte man evtl. mit einer Option wie float: bottom hinbekommen - aber sowas habe ich nicht gefunden.

Was kann bzw. muss ich ändern dass News maximal bis zu Beginn von Login geht.
Wenn das mit css direkt nicht geht (wäre schade) dann auch gern mit jquery.

Vielen Dank schonmal vorab.

css um NEWS und LOGIN herum

position: absolute;
top: 100px;
bottom: 60px;
right: 0px;
width: 200px;
float: left;
padding: 10px 0px 0px 0px;
z-index: 100;
background-color: transparent;

css NEWS

top: 0px;

css LOGIN

position:absolute;
bottom: 0px;
width: 200px;

Wenn das für jemanden interessant ist auch zum direkt ansehen unter
http://airfield-manager.lima-city.de/

 

[djheke]

Wo ist denn nun dein New-Bereich?
Egal, lass es mit der fixen und absoluten Positionierung.

Goggle mal nach display:table

 

[Tronjer]

Was kann bzw. muss ich ändern dass News maximal bis zu Beginn von Login geht.

Den gedanklichen Ansatz. Die Höhe der drei mittleren Container sollte variabel sein. Und dann gibts da noch das:
http://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/

 

[MrMurphy]

Ist die Seite nur für Besucher, die deine Fenstergröße haben?

 

[Kaffeebart]

Nein, deswegen ändert sich ja die Höhe und Breite der mittleren Elemente ;)
Header und Footer haben fixe Höhen
Die Menüs haben fixe breiten. Sonst ist da aber nichts auf meine Ansicht fixiert.

Es steht lediglich unten drunter, mit was für einer Auflösung ich gearbeitet habe und auf die es letzten Endes optimiert wurde.

 

[Kaffeebart]

Den gedanklichen Ansatz. Die Höhe der drei mittleren Container sollte variabel sein.

Sind sie doch. Sie gehen immer von Top:100px bis Bottom:60px

Ohne die Begrenzung nach unten mit bottom ist mir der Text in den Footer geflossen und der Text wurde überlagert.

Flexbox sieht interessant aus, leider habe ich da keine Option gefunden, dass die untere Box exakt der benötigten Grösse entspricht und die obere den Rest nimmt.
Ich kann ja nicht definieren, ob der Login und der darüber liegende Bereich nun 2 oder 3 mal so gross ist.

mit display.table bin ich noch dran aber der erste Ansatz hat mich auch nicht weiter gebracht, da ich auch hier bei den Tables die Höhe nicht wie gewünscht anpassen kann.

 

[Tronjer]

Da

Sind sie doch. Sie gehen immer von Top:100px bis Bottom:60px

In dem Fall könnte man auch einen anderen Ansatz wählen. Um den Footer immer unten im Viewport zu verankern, gibt es die Sticky-Footer-Methode (Google). Die drei Container in der Mitte werden gefloatet. Innerhalb des rechten der drei Containers, werden zwei weitere Divs - eines für News und das andere für das Login eingefügt.

Damit die drei Container in der Höhe identisch werden, bietet sich jQuery an. Man schickt sie durch eine Schleife, schreibt die jeweilige Höhe in ein Array und weist allen drei Containern den höchsten Wert des Arrays als neue Höhe zu.

Soll der Login-Bereich immer am unteren Ende des rechten Container stehen, könnte man entweder auch etwas mit jQuery bauen, oder ein Konstrukt aus position: relative und absolute erstellen. Setzt allerdings voraus, dass du die Eigenheiten des Attributs position kennst.

Wobei dieser Ansatz lediglich mit statischen Layout funktioniert und nicht responsiv ist. Ich würde statt dessen lieber ein Framework mit Grid-Layout, wie Bootstrap oder Foundation, einsetzen.

 

[Kaffeebart]

Ok, vielen Dank für Eure antworten.
Ich habe es jetzt mit einem kleinen jquery script gelöst.

Ich lese die Höhe von LOGIN aus und setze Bottom von NEWS auf den entsprechenden Wert.