Tricky CSS Alignment

HTML & CSS
1

Hey everyone,

I have a tricky problem.

I have the following HTML:


<div id="lines">
    <ul>
        <li>
            <input type="radio">
            <ul class="col2">
                 <li>Some text</li>
                 <li>More text</li>
            </ul>
            <ul class="col3">
                 <li><pre>Other text</pre></li>
                 <li><pre>Yet more</pre></li>
            </ul>
        </li>
    </ul>
</div>

The HTML can contain any number of list item (LI) in any of the lists, and not always an equal number in the inner two.

Now, I want to get them to display as if they were three columns, input being the first, .col2 being the second, and .col3 the third.

The first and second column (input and .col2) both have fixed width. The third column has a variable width. Also, the third column has each LI in a single line (with the div having an overflow: auto). That is the reason for the <pre> (if you know how to do this purely in CSS, please let me know).

Each outer LI should be cleared from the previous line.

Anyone have any ideas?

Here is what I have so far: http://www.arwebdesign.net/test.html (also a place to play with if you have a plugin that lets you tweak it).

I’m mainly concerned with more standards-compliant browsers like Firefox for now. I can figure out something for IE later.

Thanks.
-Christian

2

Ah, who needs sweet music when there are statements like that!

I must run now (sorry) but if you really are happy to leave IE (7 and under) behind, it might be worth considering a table display here.

3

Hi,

I think I’d need to see a drawing of what you want. :slight_smile:

If you just want three columns then something like this should do:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
/* Reset */
/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100&#37;;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
    margin:0 0 1em;
    padding:0;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
/* End Reset */

#lines {
    padding: 10px;
    width: 30%;
    background: #CCF;
    overflow: auto;
}
#lines li {
    position: relative;
    clear: both;
}
#lines li li {
    clear:none
}
#lines input {
    float: left;
}
.col2 {
    margin: 0 0 0 1em;
    float:left;
    display:inline;
}
.col3 {
    margin-left:8em;
    clear:both
}
</style>
</head>
<body>
<div id="lines">
    <ul>
        <li>
            <input type="radio">
            <ul class="col2">
                <li>Some text</li>
                <li>More text</li>
            </ul>
            <ul class="col3">
                <li> Other text </li>
                <li> Yet more text </li>
            </ul>
        </li>
        <li>
            <input type="radio" name="text" value="example">
            <ul class="col2">
                <li>Text</li>
                <li>Moar text</li>
            </ul>
            <ul class="col3">
                <li> English text goes here. This is an extra long line that goes on and on and on and on and on forever and ever. </li>
                <li> Italian text goes here. </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

Of course that may be wide of the mark :wink:

(Note your inputs should have labels associated with the control).

4

Nice work, Paul. I just wonder if it would be better to have clear: right on col3 rather than clear:both, as the latter makes the third column sit below the first two on my machine.

5

Yes I wasn’t sure how it was supposed to look and I assumed it was wanted in a descending fashion.

A picture would have helped :slight_smile:

6

Thanks for the help, but that isn’t quite what I was looking for.

Here is a picture of how I would like it to look: http://www.arwebdesign.net/example.png

Basically, it’s all lined up into a row, and there is no wrapping, it just has a horizontal scroll bar to hand the extra.

Thanks.

Also, I know I should have a label around my input… but I’m being bad. =p This is for a web application of sorts, so I left it out (it’s columns are it’s label, but you can have block elements in a label, so I just excluded it). I’ll probably add a label and just hide it wit CSS later on.

7

I got it working using absolute positioning. Since the first two columns have a constant width, I absolutely positioned the two of them, then just gave the third a left margin to get it passed the two of those.

Since, if the number of lines per set are uneven, the third column will still be the longest, I shouldn’t have any trouble. It keeps the height of it’s enclosing LI tall enough that it clears all the absolutely positioned elements.

Here is the updated example (same link): http://www.arwebdesign.net/test.html

Thanks for the help.

8

Glad you found a solution :slight_smile: (the picture would have helped earlier ;))