Create columns in CSS menu

Question

I'm attempting to build a phone directory into a CSS dropdown menu. I'm aiming for it to render like a typical phone book would, with the names aligned left and the phone extensions/numbers aligned right, like so:

James T. Kirk                    x1701
Mr. Spock               (123) 555-8795

The HTML is pretty straightforward:

<ul id="phone">

<li>
    Phone Category 1
    <ul>
        <li>
            <span class="phone-description">Phone Description 1</span>
            <span class="phone-number">x55555</span>
        </li>
        <li>
            <span class="phone-description">Longer Phone Description 2</span>
            <span class="phone-number">(800) 555-1234 x1701</span>
        </li>
    </ul>
</li>

...

</ul>

The basic formatting is fairly simple as well:

body {background: #999;}
ul {list-style: none; margin: 0; padding: 0;}
li {margin: 0; padding: 0.4em 2em 0.4em 1em; white-space: nowrap;}

#phone {position: fixed; top: 0; left: 0;}
#phone li {background: #FFF; position: relative;}
#phone li:hover {background: #CCC;}
#phone ul {display: none; position: absolute; top: 0; left: 100%;}
#phone li:hover ul {display: block;}

.phone-number {margin-left: 2em;}

Making the columns, however, has proven to be extremely difficult. I've attempted using text-align, floats, absolute positioning, and the CSS brilliance explained at "Fluid width with equally spaced DIVs."

I've put the above code up at http://jsfiddle.net/HQ4ZN/2/, along with each of my attempted solutions commented out. Any help you can provide would be much appreciated!

Use LABELS. See: http://alistapart.com/article/prettyaccessibleforms — Diodeus - James MacFarlane, Jul 25 '13 at 15:58
This would be fine as a table by the way, bearing in mind it's tabular data. If you don't want tables, then a definition list would also be a good choice. — Rich Bradshaw, Jul 25 '13 at 16:09
Label tags are explicitly for forms, no? If anything, I should probably be using a definition list. — Erik D., Jul 25 '13 at 16:10

score 2 · Answer 1 · answered Jul 25 '13 at 16:00

2

Is this what you're trying to accomplish?

#phone li ul li { overflow: hidden; }

.phone-description { float: left; }
.phone-number {float: right;}

http://jsfiddle.net/HQ4ZN/4/

answered Jul 25 '13 at 16:00

Wex

15,539
10
64
107

Add some `padding-right: 10px;` to `.phone-description` and it'll look a little nicer (although, that's not in the question, really, so feel free to ignore). – Hannele Jul 25 '13 at 16:04
@Wex: This works for me in Chrome, but not in Firefox (17.0.6esr). Much appreciated, though! – Erik D. Jul 25 '13 at 16:13

score 1 · Accepted Answer · answered Jul 25 '13 at 16:07

just use css display:table

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.category{display:table}
.category li {display:table-row}
.category span {display:table-cell}

</style>
</head>

<body>
<ul id="phone">

<li>
    Phone Category 1
    <ul class="category">
        <li>
            <span class="phone-description">Phone Description 1</span>
            <span class="phone-number">x55555</span>
        </li>
        <li>
            <span class="phone-description">Longer Phone Description 2</span>
            <span class="phone-number">(800) 555-1234 x1701</span>
        </li>
    </ul>
</li>

</ul>
</body>
</html>

I quite like that this answer doesn't rely on hard-coded widths anywhere in it (unlike the floated answer, which also does work on all immediately available browsers). Additionally, I admit I hadn't tried the "table" display settings in part because of backward compatibility issues with IE6/7, but the :before and :after selectors also don't work below IE8. Anyway, great answer, and thank you so much! — Erik D., Jul 25 '13 at 18:13

score 0 · Answer 3 · answered Jul 25 '13 at 16:03

You probably could play around with the text wrap of the different spans so the longer ones won't push the phone number down. But I believe this will fix your issues. You probably were not clearing your floats, which is why your previous methods were not working.

http://jsfiddle.net/feitla/HQ4ZN/5/

.phone-number {
   margin-left: 2em;
   float:right;
}
.phone-description {
   float:left; 
   width:150px;
}

#phone ul {
   display: none;  
   position: absolute;  
   top: 0; 
   left: 100%; 
   width:420px;
}

.clearfix {
   *zoom: 1;
}

.clearfix:before,
.clearfix:after {
   display: table;
   line-height: 0;
   content: "";
}

.clearfix:after {
   clear: both;
}

<ul>
    <li class="clearfix">
        <span class="phone-description">Phone Description 1</span>
        <span class="phone-number">x55555</span>
    </li>
    <li class="clearfix">
        <span class="phone-description">Longer Phone Description 2</span>
        <span class="phone-number">(800) 555-1234 x1701</span>
    </li>
</ul>

Create columns in CSS menu

3 Answers3