Divs überlappen, wenn Höhe eingestellt wird manuell

Question

Hier ist die Seite: https://hamzicabdulah.github.io/Raptitude/

Die divs mit den „anderen Geschichten“ und „Fußzeile“ Klassen überlappen, wenn die Höhe der „anderen Geschichten“ div manuell eingestellt:

.other-stories { 
    height: 65%; 
} 
@media screen and (min-width: 768px) { 
    .other-stories { 
    height: 89%; 
    } 
} 

Wenn ich den obigen Code entfernen, überlappen die Divs nicht. Was ist die Problemumgehung hier, wenn man bedenkt, dass die manuell eingestellte Höhe des Dives "Andere Geschichten" dort bleiben muss, um in Firefox gut zu funktionieren?

Answer 1

Setzen Float Fußzeile und andere Geschichten.

.other-stories { 
    height: 65%; 
    float:left; 
} 
@media screen and (min-width: 768px) { 
    .other-stories { 
    height: 89%; 
    float:left; 
    } 
} 

Answer 2

Es überlappt, weil die <div> s in Ihrem <div class="other-stories"> quellen über sich selbst aus dem div.

Warum haben Sie eine feste Höhe auf other-stories welche Funktionalität versuchen Sie zu gewinnen? Gibt es auch einen bestimmten Grund, warum Sie Höhe% s verwenden?

Answer 3

Mit Flex ist ein wenig schwierig. Ich schlage vor, alles zu ändern, Flex-Display zu entfernen und Bootstrap-Gitter zu verwenden. Wissen Sie?