Aligning four squares div inside a container div

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;
}

I think your [images are of unequal size](http://jsfiddle.net/NGLN/g78qc9nf/). Is that the problem? Then please edit your question in such manner. — NGLN, Nov 09 '14 at 16:37
Yes, but when I added the images its look messy. I think it is because not all the images have the same height. How can I solve it? — user3355028, Nov 09 '14 at 16:38
The best way to solve it is to use four images on the same size? — user3355028, Nov 09 '14 at 16:42

score 2 · Accepted Answer · answered Nov 09 '14 at 16:43

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>

Thanks, it solve the problem: now all the rectangles are on the same line, but unfortunately the text inside them are not :/ Any ideas? EDIT: — user3355028, Nov 09 '14 at 18:20
when I add to .single-skills-rectangle h1 top: 150px and position absolute it helps and now the texts are in the same line, BUT it is not centered to the div. How can I solve it? — user3355028, Nov 09 '14 at 18:26

score 2 · Answer 2 · answered Nov 09 '14 at 17:02

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>

Aligning four squares div inside a container div

2 Answers2