HTML borders are not the same length

Question

I have this list of salons, and each has a dashed border on the right. Some of these borders stop in front of others, is there a way to make them the same length? (ideally, so that 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 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

Ok, you need to give it the parent fixed size, the longest, 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 happens is because some of the box heights are smaller than the highest. To fix this, just add a fixed height to all divs in css. For example:

 height:200px; 

Answer 3

This is because they have different height (based on this content) ...
You can try to give a fixed height .salons class
or...
100% and fixed height in the container.

Answer 4

You need to set height , min-height and max-height

 .salons { /* other style */ height: 200px; min-height: 200px; max-height: 200px; } 

Answer 5

You do not need to correct any height, I think, just do the parent display:table; and make class salons display:table-cell;

To check how this thing works, try the HTML and CSS below

HTML

 <ul> <li>1</li> <li>2<br />2</li> <li>1</li> <li>1</li> </ul> 

CSS

 ul { display:table; list-style:none; } ul li { display:table-cell; padding:10px; border-right:1px solid red }