Margin Bottom vergrößert nur 2. Div Box

Jamye · 01.04.2015

Guten Morgen,
da es nicht einfach war, einen aussagekräftigen Titel für mein Problem zu wählen hier noch mal die genau Problembeschreibung.

Ich habe einen Quellcode der ca. so aussieht:

Code:

<div class="class1">
          <div class="class2">
                        <p>Irgendein Inhalt </p>
           </div>
</div>

Dem habe ich ein margin-bottom von 20 px zugewiesen.
Komischerweise endet das Div mit der "class2" vor dem Margin Bottom vom 
Das Margin läuft in den Inhalt des Divs mit der "class1" und macht nur diesen größer.

Ich nutze derzeit fertigen Quellcode von getbootstrap und kann daher in diesem Falle schlecht aufzählen, welche Formatierungen da jetzt alle mit reinspielen, da das ganze dann doch sehr komplex ist.

Kennt jemand das Problem und hat eine Idee, welche CSS Anweisung so ein Problem erzeugen bzw. beheben kann?

Vielen Dank schon einmal für eure Hilfe

Myhar · 01.04.2015

gib mal class2 ein overflow:auto. Hilft das?

Jamye · 01.04.2015

Wow stark, das funktioniert!
Vielen Dank für die schnelle Hilfe =)

Sehe ich das jetzt richtig, dass in meinem Code irgendwo ein Fehler liegt und ich
mit dem Overflow das Problem umgangen habe?

Myhar · 01.04.2015

Da ich deinen Code nicht kenne kann ich das nicht sagen. Wird etwas gefloated bei dir?

Jamye · 01.04.2015

Das Overflow hat den Fehler irgendwie doch nicht behoben...
Der Hintergrund der box "class2" ist einfach verschwunden und auf magische Weise hat es anschließend gepasst.

Habe aber auch etwas falsch gesehen.
Ich berichtige jetzt mal die Fehlerbeschreibung und füge css code hinzu...

Habe den Code dafür etwas modifiziert damit das ganze nicht so wirr aussieht.
Noch wichtig zu wissen ist, dass das Problem erst auftritt, wenn das Fenster UNTER
der mindestbreite von 992px liegt.
Darüber ändert ein Mediaquery die Formatierung. (alles im CSS code zu sehen)

Code:

<div class="container">
    <div class="row">
            <div class="col-md-8">
                <div class= "col-md-12">
                    <p>Hier das p, dessen Margin über die DIVS "col-md-12" und "col-md-8"                                hinaus geht und dadurch erst wieder die Klassen "row" und "container"                                  vergrößert</p>
                </div>
            </div>
        </div>
    </div>

So wie ich den Inhalt jetzt dargestellt habe, sieht der HTML Code bis zum Anfang des Container divs aus. Habe den gesamten Inhalt auskommentiert und zu verhindern, dass
andere Elemente innerhalb der Verschachtelung für den Fehler verantwortlich sind.
Jetzt kommt einmal der CSS Code, der den Klassen zugeordnet wurde.

Code:

.container:before,
.container:after,
.row:before,
.row:after {                         
                               display: table;
                               content: " ";
}

.container:after,,
.row:after {
                               clear:both;
}

.row {
                                 margin-right: -15px;
                                 margin-left: -15px;
}

.col-md-8,
.col-md-12 {
                                   position: relative;
                                   min-height: 1px;
                                   padding-right: 15px;
                                   padding-left: 15px;
}
@media (min-width: 992px) {
col-md-8,
col-md-12 {
                                     float:left;
}

col-md-8 {
                                      width: 66.66666667%;
}

col-md-12 {
                                         width:100%;
}
}

.container {
                                padding-right: 15px;
                                padding-left: 15px;
                                margin-right: auto;
                                margin-left: auto;
}
@media (min-width: 768px) {
  .container {
                                  width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
                                     width: 970px;
  }
}
@media (min-width: 1200px) {
   .container {
                                       width: 1170px;
  }
}

Da bin ich ja mal gespannt, ob da so noch jemand durchsteigen kann oder ob dafür der komplette Code sichtbar sein müsste.

Auf jedenfall vielen Dank an jeden, der sich das hier ernsthaft genauer anguckt!!

Myhar · 01.04.2015

Das ist doch (ein wenig) anders als wie du es in deinem ersten Post definiert hast. Das sind keine eigenen Klassen sondern die von bootstrap. Die haben ein float, wodurch dieses Verhalten zustande kommt.
Funktioniert es jetzt oder nicht?

Jamye · 01.04.2015

Wo kam denn das Missverständnis zu Stande, dass du geglaubt hast ich habe eigene Klassen geschrieben? Weil ich ihnen die Bezeichnung "class1" und "class2" gegeben habe?

Bis jetzt habe ich das Problem leider noch nicht lösen können.
Ich verstehe auch nicht, wie das Float da dann mit reinspielt.
Hab so ein Problem bisher noch nie gehabt...

Myhar · 01.04.2015

Ja, wegen der Bezeichnungen. Du hast gesagt, dass du bootstrap verwendest, aber die Klassen davon verschwiegen. floats nehmen Elemente aus dem Fluss, da gelten andere Regeln für margin und paddings. ^^

Jamye · 01.04.2015

Ja gut, das war wohl kein kluger Schachzug von mir. :rolleyes:

Wenn ich bisher Elemente in gefloateten Boxen platziert- und denen
Außenabstände verpasst habe, ist die gefloatete Box bisher aber immer mit gewachsen.

Jetzt wächst die ja wirklich nur noch bis zum Ende des eigentlichen Inhalts und lässt das
Margin einfach drüber laufen...

Wie kann ich das denn dann verhindern?

Myhar · 01.04.2015

Wie bereits geschrieben: Mit overflow. Oder stell mal ein konkretes Beispiel für jsfiddle.net oder so bereit, dann kann man dir vielleicht besser helfen.

Jamye · 01.04.2015

Ich hab das Problem jetzt einmal direkt nachgebaut...
Vllt hilft ja schon der gesamte HTML Code.
Ansonsten guck ich mir mal jsfiddle genauer an und lad da alles hoch...

Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Die 3 Meta-Tags oben *müssen* zuerst im head stehen; jeglicher sonstiger head-Inhalt muss *nach* diesen Tags kommen -->
    <title>Bootstrap-Basis-Vorlage</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Unterstützung für Media Queries und HTML5-Elemente in IE8 über HTML5 shim und Respond.js -->
    <!-- ACHTUNG: Respond.js funktioniert nicht, wenn du die Seite über file:// aufrufst -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <div class="container">
       <div class="row">
           <div class="col-md-8" style="background-color:#ecefe9;">
            <div class="col-md-12" style="background:#dde9f1;">
                 <p> Zeile 1 <br/> Zeile 2 </br> Zeile 3</p>
               </div>
           </div>
            <div class="col-md-4">
                test 123
            </div>
       </div>
       <footer class="footer">
      <div class="container" style="background-color:green;">
        FOOTER
          <span>Footer</span>
      </div>
    </footer>
    </div>

    <!-- jQuery (wird für Bootstrap JavaScript-Plugins benötigt) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Binde alle kompilierten Plugins zusammen ein (wie hier unten) oder such dir einzelne Dateien nach Bedarf aus -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Das ist jetzt einmal der Standard Template Code von bootstrap.
Ich hab lediglich folgenden Code selber eingefügt.

Code:

<div class="container">
       <div class="row">
           <div class="col-md-8" style="background-color:#ecefe9;">
            <div class="col-md-12" style="background:#dde9f1;">
                 <p> Zeile 1 <br/> Zeile 2 </br> Zeile 3</p>
               </div>
           </div>
            <div class="col-md-4">
                test 123
            </div>
       </div>
       <footer class="footer">
      <div class="container" style="background-color:green;">
        FOOTER
          <span>Footer</span>
      </div>
    </footer>
    </div>

Habe den CSS Befehl overflow:auto;
ausprobiert in den Klassen "col-md-8", "col-md-12", "row" und "container".
Hat leider nicht geholfen.
Irgend etwas übersehe ich oder verstehe ich nicht ganz. :neee:

Myhar · 01.04.2015

Jetzt verstehe ich besser, was du überhaupt willst. Danke.
Inwiefern ist das Verhalten anders, als wie wenn du folgenden Code verwendest:

Code:

<div class="" style="background-color:#ecefe9;">
    <div class="" style="background:#dde9f1;">
                <p> Zeile 1 <br/> Zeile 2 <br/> Zeile 3</p>
               </div>
           </div>

Was möchtest du überhaupt erreichen? Soll der hellblaue Hintergrund größer werden? Oder der graue unter dem hellblauen sichtbar sein?

Jamye · 01.04.2015

Wenn ich den Code nutze, dann ändert sich nichts.
Also was ich erreichen möchte...

Habe ich ein div, welches keine feste Höhe besitzt, dann wächst das ja für gewöhnlich mit seinem Inhalt.
Schreibe ich das da rein, dann vergrößert sich die Box, desto mehr Text ich reinschreibe.
Das margin des liegt dabei aber immer außerhalb des umgebenden divs.

Hier siehst du einmal, was die Entwicklerkonsole anzeigt.
Das befindet sich in dem darüberliegenden div und auf der rechten Seite siehst du,
bis wo die Klasse geht.
Auf der linken Seite kannst du wiederum sehen, das das margin vom p außerhalb der Box liegt.

Myhar · 01.04.2015

Ja du hast den jetzigen Zustand sehr gut beschrieben. Aber was willst du erreichen?

Jamye · 01.04.2015

Haha vielen Dank.

Ich möchte keinen weißen Bereich zwischen der Box in der das liegt und dem Footer.
Dadurch, dass die "row" Klasse weiß ist und nur sie wächst, bekomme ich aber einen weißen Balken zwischen der Box und den Footer.
Normalerweise würde ja das komplett im Div liegen, die klasse "row" genauso groß werden wie die darin enthaltene Klasse, die das beinhaltet und somit kein weißer Strich in Größe des margins vom entstehen.

Habe noch mal fix ein Bildchen gebastelt...

In dem oberen Scenario sieht man ja, wie sich das margin normalerweise auf das umgebende Div auswirken würde. Mit dem Margin möchte man ja auch bezwecken, dass ein Abstand zu dem nächst höheren Element erzeugt wird und nicht erst zu dem nächst- nächst höheren.

Das untere Scenario ist ja das, was bei mir eingetreten ist.
Ich wüsste jetzt einige Möglichkeiten, wie ich trotzdem zum Ziel komme und kein weißer Balken zu dem Footer entsteht. Wenn ich beispielsweise das margin von dem entferne, und jeweils über und unter dem ein einbaue. Das wäre dann ja aber nur eine ziemlich schlechte Lösung.

Fakt ist, dass irgend etwas an meinem Code falsch ist und ich zu Lernzwecken gerne für das nächste mal wissen würde, wo mein Fehler liegt.

Ich hoffe, dass ich dieses mal mein Problem- und das was ich erreichen möchte verdeutlichen konnte.

Myhar · 02.04.2015

Gib dem div ein padding? Reicht das nicht aus?

patrick_l · 02.04.2015

Es heißt col nicht cool!

Da du scheinbar mit Bootstrap arbeitest, solltest du auch dessen Klassen verwenden bzw. nachschauen welchen Möglichkeiten dir bereits geboten werden. Wenn es nicht passt, entweder durch eigene Klassen ergänzen und formatieren oder bestehende im Stylesheet selektieren und mit neuen (deinen) Eigenschaften und Werten überschreiben.

Edit: Sorry, sehe gerade das in deinem Markup die KLasse richtig gesetzt ist. Wohl nur in deiner Grafik vertippt.

Liebe Grüße, Patrick

Jamye · 07.04.2015

Das Padding läuft genau so aus der Box raus, aber es gibt ja genug Alternativen, wie man diesen Fehler umgeht, wäre nur interessant gewesen, woran es letztendlich gelegen hat.

Patrick, tut mir leid für die Verwirrung, da hab ich beim Erstellen der Grafik nicht aufgepasst.