Verhindern, dass sich die Bereiche im Responsive-Layout überschneiden

Question

Ich versuche zu verhindern, dass sich zwei divs nebeneinander im Responsive-Layout überlappen.

Hier ist mein html:

<div class="image"><img src="images/misc/libertyXSmall.jpg"/></div> 
    <div class="storyWrapper"> 
    <div class="headline">THIS IS A TEST HEADLINE TO SEE HOW EVERYTHING 
    WORKS ON THIS NEWS LIST PAGE!</div> 
    </div> 

Hier ist die CSS ist:

body{margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;} 
.mainContainer{float:left; height:auto; width:100%; max-width:800px; } 
.image{float:left; margin-top:0px; width:14.25%; height:auto;} 
.storyWrapper{float:left; width:85.75%; height:auto; min-height:64px; background-color:#f6f6f6; color:#000000;transition:0.2s; } 
.storyWrapper:hover{background-color:#c0c0c0; color:#ffffff;} 
.headline{text-align:left; padding:6px 6px 6px 6px; font-size:11pt; font-weight:bold; font-family:Arial; text-decoration:none;} 

Der Link zu dieser Seite lautet: http://www.rebelplanetnews.com/newsMenu3.html

Wie Sie sehen können, mein Problem ist .. der Text div auf der rechten Seite überlappt das Bild div auf der linken Seite der Seite Größe (kleiner). Ich muss das verhindern.

Answer 1

Die Antwort ist nicht, einen Prozentsatz für Ihre Überschrift zu verwenden. Die einfachste Lösung ist die Verwendung des Werts calc, der in allen modernen Browsern verwendet werden kann.

Die folgende funktioniert:

div.storyWrapper { 
    width: calc(100% - 114px); 
    float: right; 
} 

Hier habe ich darauf hingewiesen, dass die Breite des Bildes 114px ist, und die Breite des Behälters auf 100% minus daß gesetzt.

Ich habe auch den Container nach rechts geschwebt.

Beachten Sie, dass calc ein wenig pingelig ist. Insbesondere benötigen Sie Leerzeichen um den - Operator: calc(100%-114px) wird nicht funktionieren, zumindest nicht in allen Browsern.

Answer 2

Das Problem ist, dass Ihr tatsächliches Bild nicht schrumpft, wenn das .image div ist. Also .image div passt sich an die prozentuale Breite an, aber nicht an das darin enthaltene Bild. Wenn Sie dem Element img eine Breite von 100% hinzufügen, wird das Bild jetzt zusammen mit dem div-Container verkleinert, und der Text div überlappt nicht.