Why is my div not recognizing my banner?

Question

Why is my <div class="contactvlak"> not recognising the banner, it just go over it, instead of under it like my <div class="middentextvlak">? I know margin-top would be a solution, but that is not very clean one.

html:

</div>
    <img class="logo" src="images/logo.png">
    <div class="middentextvak">
        <h1>Welkom bij autorijschool NRV! </h1>
        <p>In Veldhoven en omgevingen verzorgen wij uw complete rijopleiding in onze volkswagen.
            Een rijopleiding met oog voor detail. U en uw behoefte staan hierbij steeds centraal.
            Onze ervaren instructeur geeft u een moderne rijopleiding geheel afgestemd op uw aanvangsniveau. Zo ben u altijd verzekerd van het zo mogelijk behalen van uw rijbewijs tegen een zo laag mogelijke prijs.
            <br>
            <br>
            Klik <a href="http://www.rijschoolgegevens.nl/index.asp?pageid=2&examenplaats=75&rijschoolid=5285&fromsearch=1">hier</a> voor de meest recente slagingspercentage.
        </p>
    </div>
    <div class="contactvlak">
        <h1>Contactgegevens</h1>
        <p><b>Autorijschool NRV</b>
        <br>Grasplein 2
        <br>06-21710000
        <br>info@autorijschoolNRV.nl
        <br>55.18.77.391 ABN Amro
    </div> 

css:

html, body
{
    background-image:url('images/background.jpg');
    background-repeat: no-repeat;
    height: 100%;
    margin: 0 0 0 0;
}


.banner
{
    width: 100%;
    top: 0;
    left: 0;
    margin-bottom: -5px;
    position: relative; 


}


.cssmenu
{
    float:left;
    top: 0;
    left: 0;
    background-color:black;
    width: 100%;
    height: 6%;

}

.cssmenu ul
{
    list-style-type:none;
    text-align: center;
    margin-right: 6%;

}

.cssmenu li
{
    display:inline; 
    padding-left: 5%;

}

.cssmenu li a
{
    color: white;
    text-decoration: none;
    font-family:Eras Bold ITC;
    font-size: 20px;

}

.cssmenu li a:hover
{
    color: #0671ca;
    text-decoration: none;
    font-family:Eras Bold ITC;
    font-size: 20px;
}


.middentextvak
{
    clear:both;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 43%;
    height: 35%;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 7%;
}


.middentextvak h1
{
    padding-top: 2%;
    padding-left: 5%;
    font-family:Arial;
    color: #0671ca;
    font-size: 23px;
}

.middentextvak p
{
    padding-left: 5%;
    font-family:Arial;
    margin-top: -2%;
}
.logo
{
    position: absolute;
    display: block;
    margin-top: 5%;
    margin-left: 15%;
    margin-right: auto;
    width:70%;
    z-index: 0;
    opacity:0.5;
    clear: both;
}

.contactvlak
{
    clear:both; 
    width: 23%;
    height: 35%;
    background: white;
    position:absolute;
    top:0;
    right:0;
    background: rgba(255, 255, 255, 0.5);
}

.contactvlak h1
{
    padding-top: 0;
    padding-left: 10%;
    font-family:Arial;
    color: #0671ca;
    font-size: 23px;
}

.contactvlak p
{
    padding-left: 10%;
    font-family:Arial;
    margin-top: -2%;
}

Jfiddle: http://jsfiddle.net/H5LmF/12/

Answer 1

The class contactvlak uses absolute positioning and is thus positioned in the top right corner no matter what. The clear:both has no effect on the absosutely positioned element.

.contactvlak
{
    clear:both; 
    width: 23%;
    height: 35%;
    background: white;
    position:absolute;
    top:0;
    right:0;
    background: rgba(255, 255, 255, 0.5);
}

To integrate it into the regular page flow remove the position:absolute;, top:0;, right:0;