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/