Infobox verändert sich bei float

Moin Leute,
ich brauche mal eure Hilfe und zwar ich habe eine Infobox an der linken Seite, nun möchte ich daneben meinen Content haben. Wenn ich es nicht floate zeigt er es richtig an, wenn ich die Infobox jedoch floate, wird sie vergrößert und der Titel steht nicht mehr ganz oben und da ich die Box farbig machen wollte, stellt sich das als Problem dar. Kennt jemand eine Lösung?
[ATTACH=full]4419[/ATTACH] [ATTACH=full]4420[/ATTACH]

[CODE]#infobox{
background-color: whitesmoke;
width: 20%;
height:20%;
margin-left: 30px;
margin-right: auto;
float:left;

}

#inhalt {
background-color: whitesmoke;
width: 72%;
height:30%;
margin-left: 25%;
}[/CODE]

Ohne den dazugehörigen HTML-Code gesehen zu haben, tippe ich mal darauf, dass sich der Text „INFOBOX“ in einem weiteren Blockelement befindet, z.B.

, dessen voreingestellter Außenabstand noch zurückgesetzt werden muß, damit der gelbe Hintergrund verschwindet.

h1 {margin:0}

Als bessere Alternative zur float-Eigenschaft empfehle ich Dir, das Flexbox-Modell näher anzuschauen.

https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/
http://www.w3schools.com/css/css3_flexbox.asp

Ich gebe dir einfach mal den HTML-Code dazu :wink:
[HTML]

INFOBOX

Infotext

[/HTML] Der Bereich ist eigentlich auch whitesmoke, ich habe ihn nur gekennzeichnet. Wenn ich jetzt h2 {margin:0;} ergänze ist alles schick. Danke ;). Aber das kuriose ist, dass ich h2 nicht mit margin definiert habe oder hat die Überschrift standardmäßig einen vorgegeben Wert als margin und wenn ja wieso wird es nicht umgesetzt wenn ich floate? MfG

Alle Block-Elemente (,

,

Alles klar, danke!