CODEWITHSUNDEEP
htmlcsslistcss-floathtml-lists
kaffolder
kaffolder

Reputation: 401

Trying to float divs in unordered list

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:

list design example

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

Upvotes: 0

Views: 2162

Answers (3)

kristina childs
kristina childs

Reputation: 2210

Floating elements within an element that is not floated causes problems. I find it helps to add background colors or borders to my code when trying to figure out what's happening. If you add a background color to all your elements you'll see that the <li> is missing. In order to help your browser determine where the containing element is you need to group it with the floats. You've got a couple options, either

ul.gcal li {
    padding: 0 0 0 50px;
    display: block;
    background-color: red;
    float: left;
}

or adding a clear to the bottom of the floated content, like so

<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>
    <br clear="all">
</li>

The clear="all" property isn't encouraged anymore (instead, we are supposed to use a clear class on the next element .clear { clear:both; }) but I still do sometimes. I mean... no I don't! !ho said I did?? Slander!

Here's a fiddle http://jsfiddle.net/WkBgg/

the other thing I noticed is the float:right; with the hard-coded width. Depending on the size of the browser (like mobile browsers) this will cause some strange alignments with the content above it. You may want to re-think how you align those two. In the fiddle, if you shrink the window smaller than 640px you'll see what I mean.

Upvotes: 2

Xella
Xella

Reputation: 1268

Try somethig like that: jsfiddle. May be my example helps you. If you need something more ask me.

Upvotes: 0

Ryan Kinal
Ryan Kinal

Reputation: 17732

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

Upvotes: 2

Related Questions