HTML borders not the same length

border, css, html

Solution

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

Problem

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

Original source