How to make these HTML blocks of information the same?

Question

I am trying to make these blocks of information the same, regardless of the number of words they store. As you can see from the example, when one block has less text than the other, it becomes a little smaller and the other remains of a different size.

Now my question is: how to ensure that these blocks are the same size regardless of its contents or image? I am also going to use another pair right below them.

Here is the CSS code:

 /***********All containers**************/
   .bottomContainers{
position: absolute;
margin-left: 0%;

display: inline-box;
  }

 /**********Small Containers*************/
  .container{
    max-width: 30%;
    max-height: 30%;
    margin-top:5%;
    margin-bottom: 5%;
    margin-left: 10%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
display: inline-block;
/*display: inline-block;*/
border-radius: 5px;
border-bottom: 2px solid grey;
 }

Here is the HTML code:

    <div class="bottomContainers" role="moreInfo">
     <!--Small Inner Containers for Information-->
     <div class="container" id="firstContainer">
          <br />
          <center><img src="img/map.png"></center>
          <br>
          <article>
             Some random text is in this block, It doesnt size like the next one
          </article>
     </div>
     <div class="container" id="firstContainer">
        <br />
        <center><img src="img/money.png"></center>
        <br>
        this is another block which also doesnt scale to the other block regardless of text inside of it
     </div>

What could I have done wrong here?

Answer 1

Here is one solution that might work for you:

Demo script

. center , , br , . , .container , , .

HTML:

 <div class="bottomContainers" role="moreInfo">
     <div class="container" id="firstContainer">
        <img src="http://www.placehold.it/100x100">
        <p>
          Some random text is in this block, It doesnt size like the next one
        </p>
     </div>
     <div class="container" id="firstContainer">
       <img src="http://www.placehold.it/100x100">
       <p>
         this is another block which also doesnt scale to the other block regardless of text inside of it
       </p>
     </div>
 </div>   

CSS

 .container{
    // your current styles here

    overflow: hidden;
    height: 200px;
    display: block;
    float: left;
 }

.container img {
    display: block;
    margin: 10px auto 0px;
} 

Answer 2

. - , . , , :

http://jsfiddle.net/VET6x/1/

, . , , , .

<div class="bottomContainers">

    <div class="container">
        <div>
            <img src="http://placekitten.com/g/80/80" />
        </div>
        <div>
            Some random text is in this block, It doesnt size like the next one
        </div>
     </div>

     <div class="container">
        <div>
            <img src="http://placekitten.com/g/80/80" />
        </div>     
        <div>
            This is another block which also doesnt scale to the other block regardless of text inside of it
        </div>
     </div>

</div>

.bottomContainers { overflow:hidden; }

.container { 
    width:200px;
    height:200px;

    float:left;
    position:relative;

    margin:5% 5%;
    padding:2%;

    background-color: #ecf0f1;
    color: grey;

    border-radius: 5px;
    border-bottom: 2px solid grey;
 }

.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }

, .

Answer 3

, . , . , .

. <img> HTML , css. , <br> , ?

Answer 4

Perhaps you can use display:table;, display:table-row;and display:table-cell;. This way your div will act as a table column. They will remain at the same height.

Take a look at jsfiddle !