HTML borders not the same length

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