Logo links, Navigation rechts, header hat kein Inhalt mehr.

[Queckezz]

Guten Abend,
Ich habe diese grundlegende html5 Struktur:

<header>
  <div id="logo">
    <img src="logo.png" />
  </div>
  <nav>
     ul
       li
        usw...
  </nav>
</header>

Wenn ich nun das Logo neben der Navigation haben will like so:


dann wird der header nicht mehr beachtet also das rot gekennzeichnete Feld ist nicht mehr zu sehen weil beide elemente gefloatet sind und so kein Content mehr zu beachten ist.

Wie kann man das verhindern? Brauche das dafür das dannach z.b einen Abstand zwischen Header und Content möglich ist oder eine Linie die Header und Content trennt..

 

[threadi]

Wer floatet muss auch clearen. Früher musste man dafür entweder ein umliegendes Element missbrauchen oder ein zusätzliches, inhaltloses Element (in deinem Fall innerhalb von <header>) einfügen und diesem die clear-Eigenschaft geben. Heute geht das auch mit der after-Pseudoklasse.

header:after {
 clear: both;
 content: ".";
 float: none;
 font-size: 1px;
 height: 1px;
 visibility: hidden;
}

 

[Queckezz]

Danke, funktioniert halbwegs. Leider nimmt der Header nicht die erwünschte Grösse des Logos und der Navigation an.

 

[Queckezz]

Durch suchen bin ich auf den sogenannten Clearfix gekommen, wie du threadi in deinem Beispiel gezeigt hast. Hat nicht komplett funktioniert weil ein display: block; fehlte... Hier wird es erklärt

Danke für die Hilfe!

Liebe Grüsse

 

[threadi]

Ach mist, schon wieder. Genau das habe ich schonmal vergessen. Gut gefunden :)