Creating <div containers the same height - html

Question

I'm creating my first web page and I have 3 boxes with an image and text as contet. How do I make the boxes the same height regardless of the content?
New to css etc so please help.
I have tried padding, margin etc but nothing. My code is as follows:
<!------------------------------ Three Small Span Boxes --------------------------->
<div class="container-full-width" id="boxes_lite_section">
<div class="container" >
<div class="container-fluid" >
<!-- Start of markup for boxes lite element -->
<div id="widget_boxes_container" class="row-fluid" >
<div class="boxes">
<div class="box span4">
<p>
***
</p>
<a class="box-link">
<img class="box-image" src=".jpg" />
</a>
<p align="justify" style="margin-top:20px">
content here funding.
</p>
</div>
<!--end box1-->
<div class="box span4">
<p>
***
</p>
<a class="box-link">
<img class="box-image" src=".jpg" />
</a>
<p align="justify" style="margin-top:20px">
content here
</p>
</div>
<!--end box2-->
<div class="box span4">
<p>
***
</p>
<a class="box-link">
<img class="box-image" src=".jpg" />
</a>
<p align="justify">
content here
</p>
</div>
<!--end box3-->
</div>
<!-- end boxes -->
</div><!-- end row-fluid -->
<!-- End of markup for boxes lite element -->
</div>
<!-- .container-fluid-->
</div>
<!-- .container -->
</div>
<!----------------------------- End Three Small Span Boxes ------------------------->

Answer 1

When you set the height for an element, it will be shown with this regardless of the content.
BUT if the content become taller than height, the result may be very ugly.
so, it's better to set overflow:auto in your case, that will save the box height when content is taller...
div.box {
width: 350px; /*for example*/
height:300px; /*for example*/
background: blue; /*for example*/
color:white; /*for example*/
overflow:auto; /*for example*/
border:4px solid red; /*for example*/
}
You can see result Here and you can find out your last question you mentioned in comment...
If you want to hide overflow, try overflow:hidden instead...

Answer 2

If you are dealing with variable height you can use CSS tables to render your divs.
div.boxes { display:table-row; }
div.box { display:table-cell; }
This jsfiddle should give you an indication of what it will look like with your layout.
Practically every major browser supports CSS tables now, so feel free to use them when necessary. Fixed heights are ok, but can cause issues when your content grows beyond your original expected size.