Quiz auf der Webseite nimmt ganze Seite statt ein kleines bisschen

Question

Ich habe eine Webseite, auf der einige Informationen sind + ein Quiz am Ende. Das Problem ist, dass das Quiz fast die whoel Seite abdeckt. Es muss unter dem letzten Absatz sein.

Jeder kann sehen, was das Problem sein könnte?

https://plnkr.co/edit/8re5W6mz73pnU40WaXP8?p=preview

Dies ist ein Teil des Codes sonst wäre es zu lang sein ->

.container { 
 
    float: left; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 

 
.left { 
 
    width: 30%; 
 
    margin: 05% 00% 00% 05%; 
 
} 
 

 
.imageleft { 
 
    float: left; 
 
} 
 

 
.paragraphs { 
 
    margin: 5% 30% 2% 20%; 
 
    width: 40%; 
 
} 
 

 
.right { 
 
    width: 30%; 
 
    float: right; 
 
    margin: -11% 00% 00% 40%; 
 
} 
 

 
.imageright { 
 
    width: 300px; 
 
} 
 

 
.quizbox { 
 
    width: 70%; 
 
    max-width: 950px; 
 
    border: 1px gray solid; 
 
    margin: auto; 
 
    padding: 10px; 
 
    border-radius: 10px; 
 
    border-width: 5px; 
 
    border-color: #00A7AE; 
 
    margin-top: 7%; 
 
    text-align: center; 
 
    position: relative; 
 
    background: #73B7DB; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    <a class="imageleft circle" id="quiz"> 
 
     <font color="white">How</font> 
 
    </a> 
 
    </div> 
 
    <div class="paragraphs"> 
 

 
    Geographische Informationssysteme werden in der Mobilitätsforschung eingesetzt, um <b>mehrere Perspektiven auf Verkehrssysteme und das Mobilitätsverhalten</b> miteinander in Beziehung zu setzen. Als gemeinsamer Nenner der verschiedenen Zugänge dient 
 
    stets die räumliche Koordinate. Damit ist es möglich, in komplexen Fragestellungen mehrere Ansätze zu kombinieren und ganzheitliche Lösungen zu erzielen. 
 
    </div> 
 
    <div class="right"> 
 
    <img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/quiz300x200-300dpi.jpg" /> 
 
    </div> 
 

 
</div> 
 

 
<div class="quizbox"> 
 

 
    <!-- open main div --> 
 
    <h1><span style="color:#00995D">Quiz</span></h1> 
 
    <form id="form1" action=" "> 
 
    <div class="row"> 
 
     <h3>Moths are a member of what order?</h3> 
 
    </div> 
 

 
    <div class="row"> 
 
     <input name="variable" type="radio" value="0" /> Octagon <span class="explanation" id="answer1" style="color:red"></span></div> 
 

 
    <div class="row"> 
 
     <input name="variable" type="radio" value="0" /> Leprosy <span class="explanation" id="answer2" style="color:red"></span></div> 
 

 
    <div class="row"> 
 
     <input name="variable" type="radio" value="33" />Lepidoptera <span class="explanation" id="answer3" style="color:green"></span></div> 
 
    &nbsp; 
 
    <div class="row"> 
 
     <h3>Question 2</h3> 
 
    </div> 
 
    <div class="row"> 
 
     <input name="sub" type="radio" value="33" />Answer 1 <span class="explanation" id="answer4" style="color:green"></span></div> 
 

 
    <div class="row"> 
 
     <input name="sub" type="radio" value="0" />Answer 2 <span class="explanation" id="answer5" style="color:red"></span></div> 
 

 
    <div class="row"> 
 
     <input name="sub" type="radio" value="0" />Answer 3 <span class="explanation" id="answer6" style="color:red"></span></div> 
 
    &nbsp; 
 
    <div class="row"> 
 
     <h3>Question 3</h3> 
 
    </div> 
 
    <div class="row"> 
 
     <input name="con" type="radio" value="0" />Answer 1 <span class="explanation" id="answer7" style="color:red"></span></div> 
 
    <div class="row"> 
 
     <input name="con" type="radio" value="33" />Answer 2 <span class="explanation" id="answer8" style="color:green"></span></div> 
 
    <div class="row"> 
 
     <input name="con" type="radio" value="0" />Answer 3 <span class="explanation" id="answer9" style="color:red"></span></div> 
 
    <p> 
 
     <p> <input type="submit" onclick="myFunction()" value="Check" /> </p> 
 
    </p> 
 
    </form> 
 

 

 
</div>

Answer 1

hinzufügen div Tag mit style="clear:both;" vor dem quizbox <div class="quizbox">

<div style="clear:both;"></div> 

<div class="quizbox"> 
    content 
</div> 

Answer 2

Es ist, weil Sie Ihre .container s schwebte haben, was bedeutet, sie werden versuchen "zu floaten", was bedeutet, dass der Inhalt unter ihnen über diesen divs zusammenfallen wird. Versuchen Sie clearfix zu verwenden, die im Grunde ist das Hinzufügen des folgend auf Ihre .container:

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

.container:after { 
    clear: both; 
} 

Erläuterung: Dies fügt ein Pseudo-Element als das letzte Element zu Ihrem schwebte Container, die die clear: both Eigenschaft nehmen. Dadurch wird der Container unabhängig vom Floating-Inhalt auf jeder Seite nach unten gezogen.