HTML borders not the same length

Question

I have this list of salons and each has a dotted border on the right hand side. Some of these borders stop before others, is there any way to make them all the same length? (ideally so they reach the footer) All salons are in this HTML (the information is just different):

<div class="salons">
  <h1><a href="salonpage.php?salonid=1">Urban Bliss</a></h1>
  <p> 15 Headingly Lane,
    LS6 1BL.
    0113 278 1572</p>
</div>

and the CSS is as follows:

.salons {
font-family:"Century Gothic";
width:248.5px;
max-height:inherit;
float:left;
padding-left:5px;
border-right:1px dotted #FFB6D7;
padding-bottom:5px;
}

Answer 1

Okay you need to give it's parent a fixed size, of the longest one, and then add height: 100%; to the children.

.parent {
    width: 100%;
    height: 190px;
}

.salons{
    font-family:"Century Gothic";
    width:248.5px;
    height:100%;
    float:left; /* the reason the parent needs a fixed height is due to the float */
    padding-left:5px;
    border-right:1px dotted #FFB6D7;
    padding-bottom:5px;
}

JSFIDDLE

Answer 2

The reason this is happening is because some of the box heights are less than the tallest. To fix this, just add a fixed height to all of the divs in the css. For example:

height:200px;