<h4> links und <div> rechts in einer Zeile

[berdn]

Hallo Michi,

"ruhig Brauner".

Eine Liste ist für eine Sammlung von Links das semantisch korrekte HTML-Element.

Listen unterpunkte <li> verhalten sich wie ein Blockelement, nach jeden Listenelement wird ein Zeilenumbruch eingefügt.

Das wollen wir aber nicht.

Deswegen bekommt die das <li> ber CSS die Eigenschaft display: inline.

Schon verhält es sich wie ein inline Element.

Verstanden?

Also ist damit das "Listenproblem" erledigt.

Nun habe wir aber immer noch zwei Blockelemente
<h4> <ul>

Damit die neben einander stehen können verwenden wir float.

Aber Sie sollen nicht nur nebeneinander stehen, das eine soll auch ganz links und das anders ganz rechtsstehen.

Nun brauchen wir float: left und float right.

Daher packen wir die beiden in ein Blockelement das die Ausdehnung begrenzt.

Das war in meinen Beispiel das div class="myGroup"

Damit sich aber die Element in diesem div richtig positionieren können brauchen sie eine Breite.

Un damit sind wir am Anfang meines Postings:

.myGroup { width: 10em}
.h4{ width: 5em}
.ul{ width: 5em}

Und bei der Breite eines Elementes müssen natürlich noch padding und margin und border berücksichtigt werden.

Damit der weitere Elementenfluss danach weiter läuft must Du dann das floaten auch mal wieder clear(ren)

Nun etwas deutlicher?

Ich habe auch eine Zeit gebraucht, das zu kapieren.

Liebe Grüße,

Bernd

PS: Andererseits ist es ein Standard der in diesem Forum immer wieder gefragt wird.

Auch die Sache mit der Liste wird immer wieder erklärt

So bist Du leider der hundertste(?) der Fragt
"Warum schwimmt Eis auf dem Wasser"