ansaurus

Question

Answer 1

+2 A:

Have a look at the code below.

Obviously the IE hacks and moz rules should be moved into conditional stylesheets and there are some padding issues (read: use a css reset)

but other than that this should do the trick....

alt text

Example

    <style type="text/css">
        ul {
            background-color:#ddddff;
            overflow:auto;
            margin:0;
            padding:0 0 0 4px;
            width:296px;
        }

        li {
            background-color:#ddffdd;
            display:inline-block;

            /* Trick FF2 into using inline-block */
            display:-moz-inline-stack;

            /* Trick IE6 into using inline-block */
            *display: inline;
            zoom:1;

            list-style-type:none;
            margin:0 0 0 -4px;

            /* Trick IE6 into enforcing min height */
            min-height:50px;
            height:auto !important;
            height:50px;

            padding: 0;
            vertical-align:top;
            width:100px;
        }

    </style>
</head>

<body>

    <ul>
            <li>apples<br />oranges<br />lemons<br />cherries</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
    </ul>

</body>

michael 2010-08-11 16:29:47

ansaurus

tags:

views:

answers:

Fluid inline list and row alignment

related questions