[ERLEDIGT] Float zerstört layout

[Larry]

Ich habe mir ein Design erstellt, jedoch habe ich 1,5 Probleme.

http://jsfiddle.net/MGK6z/4/

Mein Hauptproblem ist wieso die zwei <article> in der <section> beim floaten aus dem weißen <main> fallen? Wenn ich sie nicht floate sind sie drinnen. Wie bekomme ich die wieder rein?

Das zweite Problemchen sind die 3-4 pixel die zwischen Logo und Menü sind. Ich habe es extra Rot und Blau hinterlegt damit ma es besser sieht. Ich hab schon so viel mit margin padding herumprobiert, aber irgendwie bekomme ich diesen kleinen abstand nicht weg.

Vielen Dank für eure Hilfe

 

[Bennyville]

Zum. 1.:
Was du suchst ist der „clearfix“:
http://nicolasgallagher.com/micro-clearfix-hack/

In den meisten Fällen reicht auch ein overflow:hidden; auf das <section>-Element.

Zum 2.:
Einfach display: block; auf das Bild.
Bilder sind standardmäßig Inline-Elemente und befinden sich wie Text/Buchstaben auf einer Grundlinie. Daher der untere Abstand.

 

[Larry]

Danke Bennyvile, jetzt passt alles.

Der Thread kann geschlossen werden.