Reputation: 53
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>[email protected]
<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/
Upvotes: 1
Views: 70
Reputation: 2329
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;
Upvotes: 1