Why are two divs overlaying each other without positioning?

Question

I have two divs. But the one beneath is overlaying the one above. How? It's about the div "hoogte". It's beside the div "doelstelling" but the div "hoogte" has to be beneath the div "doeltelling". https://jsfiddle.net/5g0ur45u/

 #bovenrij {
 width: 80%;
 float: right;
 margin-right: 3em;



  }

#bovenrij div{
 width: 20%;
 float: left;


}



#interactief{
width: 28%;
background-color: #e8b215;
float: left;
padding-top: 1em;
padding-bottom: 1em;
padding-left:2% ;
padding-right: 2%;
margin-left: 2%;
}

/*licht roze achtergrond kleur*/
#platform, #ad, #platformad, #customised, #personal{
background-color: #f4f4f4;
float: left;
width: 28%;
margin-left: 2%;
margin-bottom: 1em;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 2%;
padding-right: 2%;
}

#interactief > h1{
color: white;
font-size: 18px;
margin-bottom: 0.4em;
}
/*titel*/
#platform > h1, #ad > h1, #platformad > h1, #customised > h1, #personal > h1{
color: #e8b215;
font-size: 18px;
margin-bottom: 0.4em;
}
/*sub titel*/
#interactief > h2, #platform > h2, #ad > h2, #platformad > h2, #customised >    h2, #personal > h2{
color: black;
margin-bottom: 1em;

}

/*uitleg tekst*/
#interactief > p, #platform > p, #ad > p, #platformad > p, #customised > p,    #personal > p{
line-height: 120%;
margin-bottom: 1em;
}
/*lees meer*/
#interactief > h3 {
margin-left: 0em;
background-color: #3c434a;
padding: 0.5em;
width: 4.75em;
border-radius: 0.3em;
}
/*lees meer*/
#platform > h3, #ad > h3, #platformad > h3, #customised > h3, #personal > h3{
background-color: #3c434a;
width: 4.75em;
padding: 0.5em;
border-radius: 0.3em;
}

@media screen and (max-width: 1088px) {
#bovenrij div{
  width: 43%;
  float: left;
}


}

.clearfix:after {
 visibility: hidden;
 display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
 }

Answer 1

Try to put <div style="clear:both;"></div> before hoogte div, like this

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

  <div id="hoogte">
    <h1>Blijf op de hoogte</h1>
  </div>

or

  <div id="hoogte" style="clear:both;">
    <h1>Blijf op de hoogte</h1>
  </div>

Answer 2

remove class clearfix - #bovenrij

add class clearfix - #doelstelling

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

#bovenrij {
  width: 80%;
  float: right;
  margin-right: 3em;
  position: relative;
  

}

#bovenrij div{
  width: 20%;
  float: left;


}



#interactief{
    width: 28%;
    background-color: #e8b215;
    float: left;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left:2% ;
    padding-right: 2%;
    margin-left: 2%;
}

/*licht roze achtergrond kleur*/
#platform, #ad, #platformad, #customised, #personal{
    background-color: #f4f4f4;
    float: left;
    width: 28%;
    margin-left: 2%;
    margin-bottom: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 2%;
    padding-right: 2%;
}

#interactief > h1{
    color: white;
    font-size: 18px;
    margin-bottom: 0.4em;
}
/*titel*/
#platform > h1, #ad > h1, #platformad > h1, #customised > h1, #personal > h1{
    color: #e8b215;
    font-size: 18px;
    margin-bottom: 0.4em;
}
/*sub titel*/
#interactief > h2, #platform > h2, #ad > h2, #platformad > h2, #customised > h2, #personal > h2{
    color: black;
    margin-bottom: 1em;

}

/*uitleg tekst*/
#interactief > p, #platform > p, #ad > p, #platformad > p, #customised > p, #personal > p{
    line-height: 120%;
    margin-bottom: 1em;
}
/*lees meer*/
#interactief > h3 {
    margin-left: 0em;
    background-color: #3c434a;
    padding: 0.5em;
    width: 4.75em;
    border-radius: 0.3em;
}
/*lees meer*/
#platform > h3, #ad > h3, #platformad > h3, #customised > h3, #personal > h3{
    background-color: #3c434a;
    width: 4.75em;
    padding: 0.5em;
    border-radius: 0.3em;
}

@media screen and (max-width: 1088px) {
    #bovenrij div{
      width: 43%;
      float: left;
    }


}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

<div id="doelstelling"  class="clearfix">
<h1>De Oplossing voor elke doelstelling</h1>
<h2>Onze online producten en Lorem Ipsum</h2>
    <p>Present commodo cursus nagnva vel scelerisque nisl consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p>



<div id="bovenrij" >
		<div id="interactief">
			<h1>Interactieve video's</h1>
			<h2>Zijn met Lorem Ipsum</h2>
			<p>Present commodo cursus nagnva vel scelerisque nisl<br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p>
			<h3>Lees meer</h3>
		</div>
		<div id="platform">
			<h1>Ons Online Video Platform</h1>
			<h2>Is altijd Ipsum Color</h2>
            <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p>
			<h3>Lees meer</h3>
		</div>
		<div id="ad">
			<h1>Video Advertentie Platforms</h1>
			<h2>Zijn zeer lorem ipsum dolor</h2>
            <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p>
			<h3>Lees meer</h3>
		</div>

<div id="platformad">
			<h1>Video advertentie Platforms</h1>
			<h2>Zijn zeer Lorem Ipsum dolor</h2>
    <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p>
			<h3>Lees meer</h3>
		</div>
		<div id="customised">
			<h1>De customised Player</h1>
			<h2>Bieden wij Lorem Ipsum Dolor</h2>
            <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p>
			<h3>Lees meer</h3>
		</div>
		<div id="personal">
			<h1>Gepersonaliseerde Video's</h1>
			<h2>Kunnen de Lorem Ipsum dolor</h2>
            <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p>
			<h3>Lees meer</h3>
		</div>
	</div>
</div>

<div id="hoogte">
	<h1>Blijf op de hoogte</h1>
</div>

Answer 3

<div id="hoogte" style="clear:both">
    <h1>Blijf op de hoogte</h1>
</div>

You have to use clear:both property in order to avoid overlapping.please refer your fiddle.

https://jsfiddle.net/kq7w8f80/