Question

I’m a budding web designer and do not always struggle with realizing my design into code, but today as I am working on a site, I have run into a problem. I am trying to nest two divs within a <li> list element. I would like one to span the full-height of the <li> element and float: left; while the other div contains two lines of text and I would like it to float: right;. I think what I’m trying to do is fairly simple, but for some reason I’m just really struggling with getting this to work properly. I’m essentially just making a list of calendar events, which eventually I’ll use PHP to pull in data from a Google Calendar and re-populate the sample info you see below.

I’m trying to get the list to look like this:

Please keep in mind that to get the code working, I’ve replaced my Google Webfont for the time being in the CSS with just Arial Black and Arial. Arial Black should be used for the .day class font and Arial should be used for the .info class font (aka. the time and place lines).

Any help would much be appreciated! Thanks!!

HTML:

<ul class="gcal">
    <li>
        <div class="gcal-event">
            <div class="day">
                6.07
            </div>
            <div class="info">
                <span class="time">8pm-10:30pm</span><br />
                    456 Fake Ln. Blvd., New York, NY
            </div>
        </div>
    </li>
    <li>
        <div class="gcal-event">
            <div class="day">
                7.12
            </div>
            <div class="info">
                <span class="time">6pm-7pm</span><br />
                    123 Fake Ln., Chicago, IL
            </div>
        </div>
    </li>
</ul>

CSS:

ul.gcal {
    list-style: none;
    padding: 0 0 0 15px;
}

ul.gcal li {
    padding: 0 0 0 50px;
    display: block;
}

.gcal-event {
}

.day {
    float: left;
    width: 150px;
    text-align: right;
    padding: 7px 0 0 0;
    font-family: 'Arial Black', sans-serif;
    font-size: 48px;
    line-height: 0.6em;
}

.info {
    float: right;
    width: 640px;
    text-align: left;
    padding: 0 0 0 10px;
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    line-height: 1em;
}

.info span.time {
    font-weight: bold;
}

Answer 1

This is because the lis are losing their height. Floating children do not contribute to the height of the parent. Add overflow: hidden to the lis in order to solve this.

ul.gcal li {
    padding: 0 0 0 50px;
    display: block;
    overflow: hidden;
}

Fiddle