css - How do I make these HTML blocks of info stay the same size? -

I am trying to make these blocks of information equal, regardless of the words of each word. As seen in the example, when one block has less text than the other, then one becomes slightly smaller and the other remains a different shape.

Now my question is, how can I get these blocks shaped regardless of their content or image? I am going to use another couple under them.

Here the CSS code Is:

  / *********** All containers ******************************** Margin-left: 0%; Display: Inline box; } / ********** Small containers ************ Container {max-width: 30%; Maximum-height: 30%; Margin Top: 5%; Margin-down: 5%; Margin-left: 10%; Padding-left: 2%; Padding-right: 2%; Padding-down: 2%; Background color: # ecf0f1; Color: Gray; Display: Inline-block; / * Display: Inline-block; * / Boundary-radius: 5px; Border bottom: 2px solid brown color; }  

Here is the HTML code:

  & lt; Div class = "bottomContainers" role = "more info" & gt; & Lt ;! - Inner Inner Containers Information - & gt; & Lt; Div class = "container" id = "first container" & gt; & Lt; Br / & gt; & Lt; Center & gt; & Lt; Img src = "img / map.png" & gt; & Lt; / Center & gt; & Lt; Br> & Lt; Articles & gt; Some random text is in this block, it is not shaped like the next one & lt; / Article & gt; & Lt; / Div & gt; & Lt; Div class = "container" id = "first container" & gt; & Lt; Br / & gt; & Lt; Center & gt; & Lt; Img src = "img / money.png" & gt; & Lt; / Center & gt; & Lt; Br> This is another section which does not scale on other blocks keeping in mind the text inside it & lt; / Div & gt;  

What did I possibly do wrong here?

This is a solution that can work for you:

< Strong>

I have changed your code a little bit using the center tag, it is also harassed, it also shows that br Tags were for difference, which can be done with margins. I ended the specified height, the main drawback in it is that if the window size is too high then overflow text will be hidden.

HTML:

  & lt; Div class = "bottomContainers" role = "more info" & gt; & Lt; Div class = "container" id = "first container" & gt; & Lt; Img src = "http://www.placehold.it/100x100" & gt; & Lt; P & gt; Some random text is in this block, it is not shaped like the next one & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "container" id = "first container" & gt; & Lt; Img src = "http://www.placehold.it/100x100" & gt; & Lt; P & gt; This is another block, which does not scale the other block regardless of the text inside it & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

CSS:

  .container {// your current styles are overflow here: hidden; Height: 200 pixels; Display area; Swim left; }. Container IMG {Display: Block; Margin: 10px Auto 0 pixels; }