Aligning four squares div inside a container div - html

Question

I want to vertical align four single divs side by side. Each div contains text + image.
For some reason, it's not working. There are some divs which located more higher than the others.
I want it to look like that:
div's container:
DIV DIV DIV DIV
<div id="skills-container" class="full-size-properties">
<h1 class="site-titles">Personal Skills</h1>
<div id="four-rectangles">
<div id="front-end" class="single-skills-rectangle">
<img src="Images/front-end.png" />
<h1>FRONT-END</h1>
<h2>CSS3, HTML5, JavaScript</h2>
</div>
<div id="back-end" class="single-skills-rectangle">
<img src="Images/back-end.png" />
<h1>BACK-END</h1>
<h2>JAVA</h2>
</div>
<div id="design" class="single-skills-rectangle">
<img src="Images/design.png" />
<h1>DESIGN</h1>
<h2>?</h2>
</div>
<div id="photography" class="single-skills-rectangle">
<img src="Images/photography.png" />
<h1>PHOTOGRAPHY</h1>
<h2>Canon and Nikon</h2>
</div>
</div>
</div>
Here is the CSS:
#skills-container {
height: 400px;
background: #F8F8F8 url("../Images/noisy.png");
top: 5px;
}
#four-rectangles {
position: absolute;
top: 60px;
background-color: yellow;
}
.single-skills-rectangle {
background-color: #fff;
width: 200px;
height: 210px;
border: 1px solid #CBCBCB;
border-radius: 10px;
display: inline-block;
margin-left: 25px;
text-align: center;
}
.single-skills-rectangle h1 {
font-size: 20px;
font-weight: 700;
color: #06557c;
margin-top: 35px;
}
.single-skills-rectangle img {
margin-top: 30px;
}
.single-skills-rectangle h2 {
font-size: 15px;
color: #808080;
margin-top: 7px;
}

Answer 1

Just add vertical-align: top to the .single-skills-rectangle class.
body {
margin: 0;
}
#skills-container {
height: 400px;
background: #F8F8F8 url("../Images/noisy.png");
top: 5px;
}
#four-rectangles {
position: absolute;
top: 60px;
background-color: yellow;
}
.single-skills-rectangle {
background-color: #fff;
width: 120px;
height: 210px;
border: 1px solid #CBCBCB;
border-radius: 10px;
display: inline-block;
margin-left: 15px;
text-align: center;
vertical-align: top;
}
.single-skills-rectangle h1 {
font-size: 14px;
font-weight: 700;
color: #06557c;
margin-top: 35px;
}
.single-skills-rectangle img {
margin-top: 30px;
}
.single-skills-rectangle h2 {
font-size: 12px;
color: #808080;
margin-top: 7px;
}
<div id="skills-container" class="full-size-properties">
<h1 class="site-titles">Personal Skills</h1>
<div id="four-rectangles">
<div id="front-end" class="single-skills-rectangle">
<img src="http://lorempixel.com/70/70/city" />
<h1>FRONT-END</h1>
<h2>CSS3, HTML5, JavaScript</h2>
</div>
<div id="back-end" class="single-skills-rectangle">
<img src="http://lorempixel.com/80/80/city" />
<h1>BACK-END</h1>
<h2>JAVA</h2>
</div>
<div id="design" class="single-skills-rectangle">
<img src="http://lorempixel.com/60/60/city" />
<h1>DESIGN</h1>
<h2>?</h2>
</div>
<div id="photography" class="single-skills-rectangle">
<img src="http://lorempixel.com/50/50/city" />
<h1>PHOTOGRAPHY</h1>
<h2>Canon and Nikon</h2>
</div>
</div>
</div>

Answer 2

One solution is to use a default width for all your images regardless of the size of each image:
.single-skills-rectangle img {
width: 100px;
}
Code snippet
#skills-container {
height: 400px;
background: #F8F8F8 url("../Images/noisy.png");
top: 5px;
}
#four-rectangles {
position: absolute;
top: 60px;
background-color: yellow;
}
.single-skills-rectangle {
background-color: #fff;
width: 200px;
height: 210px;
border: 1px solid #CBCBCB;
border-radius: 10px;
display: inline-block;
margin-left: 25px;
text-align: center;
}
.single-skills-rectangle h1 {
font-size: 20px;
font-weight: 700;
color: #06557c;
margin-top: 35px;
}
.single-skills-rectangle img {
margin-top: 30px;
}
.single-skills-rectangle h2 {
font-size: 15px;
color: #808080;
margin-top: 7px;
}
.single-skills-rectangle img {
width: 100px;/*add a default image width*/
}
<div id="skills-container" class="full-size-properties">
<h1 class="site-titles">Personal Skills</h1>
<div id="four-rectangles">
<div id="front-end" class="single-skills-rectangle">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" />
<h1>FRONT-END</h1>
<h2>CSS3, HTML5, JavaScript</h2>
</div>
<div id="back-end" class="single-skills-rectangle">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" />
<h1>BACK-END</h1>
<h2>JAVA</h2>
</div>
<div id="design" class="single-skills-rectangle">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" />
<h1>DESIGN</h1>
<h2>?</h2>
</div>
<div id="photography" class="single-skills-rectangle">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" />
<h1>PHOTOGRAPHY</h1>
<h2>Canon and Nikon</h2>
</div>
</div>
</div>