Different margins with divs - html

Question

I have 3 divs placed next to each other, they have same heights and widths. but for some reason the one is placed higher than the other. they're still next to each other, but the margin from the top is different for every single 1 of them.
html:
<div class="diensten">
<div id="dienst1">
<h2>Ontruimingsoefening</h2>
<p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken.</p>
<img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst2">
<h2>Beheer brandmeldinstallatie</h2>
<p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.</p>
<img src="Foto's/IMG_2704.JPG">
</div>
<div id="dienst3">
<h2>Camerabeveiliging</h2>
<p>Wij verzorgen uw camera beveiliging. Registratie wat er in en rond uw pand gebeurt, het kan door middel van camera’s welke worden geprojecteerd in overleg, zodat de verzochte beelden kunnen worden opgeslagen op een harddisk recorder. Camera’s zijn er in diverse types. Voor de nachtelijke situatie kunnen er lampen worden geplaatst, ook zijn er camera’s welke in het donker automatisch overschakelen naar zwart-wit en doormiddel van ingebouwde infrarood verlichting nog uitstekend beeld geven. Tevens is het koppelen van camerabeelden met een Particuliere Alarmcentrale mogelijk.</p>
</div>
css:
.diensten h2 {
padding-top: 40px;
}
.diensten p, h2 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
padding: 20px;
}
.diensten {
position: absolute;
display: inline-block;
height: 500px;
background-color: #FFFFFF;
margin: auto;
}
#dienst1 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst3 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 img{
height: 300px;
width: 450px;
}
#dienst1 img {
position: relative;
display: block;
margin: auto;
width: 450px;
margin-top: 100px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst2 img{
position: relative;
display: block;
margin: auto;
width: 450px;
height: 350px;
margin-top: 30px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst3 img{
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

Answer 1

The middle one is taller. If you want them aligned to the top of their parent, add vertical-align: top to the 3 divs.
.diensten h2 {
padding-top: 40px;
}
.diensten p, h2 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
padding: 20px;
}
.diensten {
position: absolute;
display: inline-block;
height: 500px;
background-color: #FFFFFF;
margin: auto;
}
#dienst1 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst3 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 img{
height: 300px;
width: 450px;
}
#dienst1 img {
position: relative;
display: block;
margin: auto;
width: 450px;
margin-top: 100px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst2 img{
position: relative;
display: block;
margin: auto;
width: 450px;
height: 350px;
margin-top: 30px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst3 img{
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.diensten > div {
vertical-align: top;
}
<div class="diensten">
<div id="dienst1">
<h2>Ontruimingsoefening</h2>
<p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast
worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken.</p>
<img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst2">
<h2>Beheer brandmeldinstallatie</h2>
<p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen
en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een
visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.</p>
<img src="Foto's/IMG_2704.JPG">
</div>
<div id="dienst3">
<h2>Camerabeveiliging</h2>
<p>Wij verzorgen uw camera beveiliging. Registratie wat er in en rond uw pand gebeurt, het kan door middel van camera’s welke worden geprojecteerd in overleg, zodat de verzochte beelden kunnen worden opgeslagen op een harddisk recorder. Camera’s zijn
er in diverse types. Voor de nachtelijke situatie kunnen er lampen worden geplaatst, ook zijn er camera’s welke in het donker automatisch overschakelen naar zwart-wit en doormiddel van ingebouwde infrarood verlichting nog uitstekend beeld geven.
Tevens is het koppelen van camerabeelden met een Particuliere Alarmcentrale mogelijk.</p>
</div>