• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Infobox verändert sich bei float

Status
Für weitere Antworten geschlossen.

I-Tiger

Mitglied
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?
float.PNG nichtfloat.PNG
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%;
}
 
Werbung:
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. <h1>, dessen voreingestellter Außenabstand noch zurückgesetzt werden muß, damit der gelbe Hintergrund verschwindet.
CSS:
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 ;)
HTML:
  <div id="infobox"><b><center><h2 class="titelbox">INFOBOX    </h2></center>
<p class="textbox">Infotext</p></div></b>
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
 
Werbung:
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?
Alle Block-Elemente (<h1-6>, <p>, <ul>, ...) besitzen von Hause aus einen Außenabstand, der zurückzusetzen ist, wenn er an der Stelle nicht gewünscht ist.

Zum nicht-nachvollziehbaren Verhalten empfehle ich Zusammenfallen von Außenabständen meistern
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben