i got some ul li height problems - html

Question

When inspecting my elements, i noticed my height on the first li is very low.
I'm trying to add a background to the whole li after selecting the "city (2)".
The background fills only City(2) an half of New York. I tried without floating, but then i can't get them lined up.
I've added 2 photos. One where i have floating, and one without.
<ul class="specs">
<li>
<div class="trigger">› City (2)</div>
<div class="cityByLocation">
<ul>
<li class="cityInfo">
<div class="cityName" style="float: left;">
› New York
</div>
<div class="cityDistance" style="float: left;">
430 miles
</div>
<div class="btn-take"></div>
</li>
<li class="cityInfo">
<div class="cityName" style="float: left;">
› Chicago
</div>
<div class="cityDistance" style="float: left;">
430 miles
</div>
<div class="btn-take"></div>
</li>
</ul>
</div>
</li>
<ul>
css:
.cityName{
float: left;
width: 45%;
}
.cityDistance {
float: left;
width: 20%;
}
.specs {
padding: 0;
}
.specs li {
padding: 0;
padding-top: 10px;
list-style: none;
}
.specs ul {
list-style: none;
padding: 0;
}

Answer 1

You need to clear your floats as Eric said. The simplest way to achieve that is by applying overflow: hidden to the container, so:
.cityByLocation {
overflow: hidden;
}
http://jsfiddle.net/a3GLG/

Answer 2

I think this will solve your problem.
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.
You can use 2 methods to fix it:
{clear:both} or .clearfix
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
source

Answer 3

You can also fix it by setting overflow: hidden to li element. It will clear and auto calculate height.
-- update --
thanks #mickmackusa
https://jsfiddle.net/e94pzbbn/1/