Reputation: 71
Please see JSfiddle: http://jsfiddle.net/MU2y2/ The bottom divs are not properly aligned, but i can't find why. I think this must have to do with the display inline-block. However, there is no top-margin
<div class="kaders">
<div class="rij">
<div class="kader" href="http://www.checkjekamer.nl/check/huurZelfstandig">
<h1>Zelfstandig</h1>
<p>Check hier je kamer als je in <b>zelfstandige</b> woonruimte woont</p>
</div>
<div class="kader" href="http://www.checkjekamer.nl/check/huurOnzelfstandig">
<h1>Onzelfstandig</h1>
<p>Check hier je kamer als je in <b>onzelfstandige</b> woonruimte woont</p>
</div>
</div>
<div class="rij">
<div class="kader" href="http://www.checkjekamer.nl/check/huurToeslag">
<h1>Huurtoeslag</h1>
<p>Check hier de hoogte van je <b>huurtoeslag</b></p>
</div>
<div class="kader" href="http://www.checkjekamer.nl/check/brandveiligheid">
<h1>Brandveiligheid</h1>
<p>Check hier de <b>brandveiligheid</b> van je kamer</p>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body{
font-family:Open Sans;
}
/* background-color: #f7f7f7;
color:#d10000;
*/
.kaders{
text-align:center;
}
.kader{
cursor:pointer;
display:inline-block;
width:200px;
height:200px;
background-color: #f7f7f7;
margin:10px;
margin-top:0;
}
.rij{
display:block;
border:1px solid pink;
}
.kader h1{
font-size:1.1em;
}
Upvotes: 2
Views: 68