Elemente nebeneinander mit max Höhe des umgebenden Elementes

[HirteDerMeere]

Hallo,

ich möchte gern in eimem title block zwei weitere Elemente (h1 & ul) nebeneinander anordnen. Jedoch sollen beide Elemente die höhe des Elternelementes haben. Bislang ist es mir gelungen die Elemente nebeneinander anzuordnen, jedoch kommen die Elemente nicht auf die gewünschte Höhe. Zum besseren Verständnis der relevante Code.

HTML

Code: Alles auswählen

    <div id="title">
        <h1>Lagerverwaltung</h1>
        <ul>
        <li>Angemeldet als:</li>
        <li>Benutzer Abmelden</li>
        </ul>
        <div class="clearB";">&nbsp;</div>
    </div>


CSS

Code: Alles auswählen

/* CSS Funktionen */

.clearL {clear:left;}
.clearR {clear:right;}
.clearB {clear:both;}

#title {
   color: white;
   background: #a4a4a4;
}

#title h1 {
   border: 1px solid navy;   
   float: left;
        height: 100%;
}

#title ul {
   border: solid 1px fuchsia;
   float:right;
   margin:1ex;
   background: #8a8a8a;
   color: white;
   height: 100%;
}


Nicht wundern wegen den komischen Rahmenfarben, das dient mir nur zur Darstellung der Bereiche.

Wie bereits erwähnt wäre mein Ziel, das sowohl das H1 Element wie auch das UL Element die gesamte Höhe des Elternelements title ausfüllen.

Ich habe schon einiges probiert, lang gesucht, nur scheine ich da noch ein kleines Problem mit dem Verständnis zu haben. ich wäre sehr dankbar für eine kleine Hilfestellung.

MfG
HirteDerMeere

[Azra]

Versuch mal außerhalb des "title" Containers zu clearen (danach).
In deinem Code hat dieses Element keine Höhe oder Breite, das heißt es ist entweder so groß wie dessen Elternelement oder wie seine Kinderlemente.

Wozu soll eine Überschrift so hoch sein wie eine Liste? Geht es hier darum den Hintergrund auszufüllen?