✔ H1 soll am unteren Rand eines DIV ausrichten

[NetBull]

Hi,

ich kämpfe hier mit einem simplen Problemchen.....

Ich habe ein DIV in dem sich ein H1 und ein weieres DIV befinden. Das inner DIV bekommt eine dynamische Größe (da werden ICONS abgelegt, die je nach Situation die Höhe des DIV beeinflussen).

Nun möchte ich das des H1 immer am unteren Rand des äusseren DIV 'klebt'.

<div id="boxHead">
                        <h1 id="boxTitle">Das ist meine Ueberschrift</h1>
                        <div id="BoxIcons">kleine ICON BOX</div>
                        <div class="EndFloat"></div>
                    </div>

Irgendwie will das H1 einfach nicht nach unten. Oder muss ich das mit JavaScript / jQuery machen?

LG NetBu||

 

[SpiceLab]

Für dein Vorhaben gibt's gleich zwei Praktiken

1. CSS-Positionierung:

div#boxHead {position:relative}
div#boxHead h1#boxTitle {position:absolute;bottom:0;left:0}

2. CSS-Tabelleneigenschaften + vertikale Ausrichtung:

div#boxHead {display:table;width:100%}
div#boxHead h1#boxTitle {display:table-cell;vertical-align:bottom}

[edit]Tipp-Ex[/edit]​

 

[NetBull]

@SpiceLab :

Hi,

habe die erste Methode gewählt. Sieht schon mal nicht schlecht aus....
Aber..... nachfolgende Elemente verhalten sich nun merkwürdig, Reihenfolge stimmt dann nicht mehr.
Hier der HTML Code:

<div id="ContentBox">
    <div id="Article">
    <div class="head">
    <h1 class="absoluteH1">H1 titel</h1>
    <div class="topcontrols">steuerelemente<br>zeile<br>zeile<br>zeile<br>zeile</div>
    </div>
    <div class="content">
    <p>Hier kommt dann der Inhalt...</p>
    </div>
    <div class="controls">
    <p>hier dann die letzte Zeile mit Infos / weiteren Controls<p>
    </div>
    </div>
    </div>

Hier das CSS:

#Article .head{
    position:relative
}

#Article .head h1{  
    bottom:0px;
    left:0px;
    padding: 0px;
    margin: 0px;
}

#Article .head .absoluteH1{
    position:absolute;
}

#Article .head .topcontrols{
    width: 150px;
    background-color: #F00;
    margin-left: auto;
    margin-right: 10px;  
}

Und hier ein Screenshot wie es aussieht....

Der Text "hier dann die letzte Zeile..... " sollte eigentlich unter dem Text "Hier kommt dann der Inhalt ...." stehen...
Wie bring ich dem Browser bei das die Position wieder normal sein soll....?

LG NetBu||

 

[SpiceLab]

Der Text "hier dann die letzte Zeile..... " sollte eigentlich unter dem Text "Hier kommt dann der Inhalt ...." stehen...
Wie bring ich dem Browser bei das die Position wieder normal sein soll....?

Mit deinem HTML- und CSS-Auszug ist das bei mir erwartungsgemäß auch der Fall, denn die angewandte Positionierung hat auf diese nachfolgenden Elemente keinen Einfluß. Für sie muß da auch nichts gesondert oder speziell geregelt werden.

Der Screenshot lässt hier viel mehr die Vermutung zu, dass die Klasse .content im CSS eine float:left-Regel besitzt, und deshalb vom nachfolgenden Block .controls umflossen wird.

Gibt es eine Online-Version der Seite, in der der Fehler auftritt?

 

[NetBull]

@SpiceLab :

Hi,

yep, ... Du hattest Recht... Ziemlich versteckt war da tatsächliche ein float:left....

Online ist das noch nicht. Kommt aber bald....

Merci....