Home/ Questions/Q 996627
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T06:54:23+00:00

I have a fluid grid built with <li> elements. eg: <ul> <li></li> <li></li> <li></li>

  • 0

I have a fluid grid built with <li> elements.

eg:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>​

li
{
    border:solid 1px green;
    width: 100px;
    min-height:50px; 
    display: inline;
    margin: 10px;
    float: left;
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

so this looks something like:

-----------   -----------   -----------   
|         |   |         |   |         |
|         |   |         |   |         |
-----------   -----------   -----------

-----------   -----------   -----------   
|         |   |         |   |         |
|         |   |         |   |         |
-----------   -----------   -----------

hooray!

The problem is when I add content in one of the <li> elements which stretches the height. I want to end up with something like this:

-----------   -----------   -----------   
| apples  |   |         |   |         |
| oranges |   |         |   |         |
| lemons  |   -----------   -----------
| cherries|
-----------

-----------   -----------   -----------   
|         |   |         |   |         |
|         |   |         |   |         |
-----------   -----------   -----------

But I actually end up with something like this:

-----------   -----------   -----------   
| apples  |   |         |   |         |
| oranges |   |         |   |         |
| lemons  |   -----------   -----------
| cherries|
-----------   -----------   -----------
              |         |   |         |
              |         |   |         |
              -----------   -----------

-----------   
|         |   
|         |   
-----------

booo!

So basically, I’m trying to keep the ‘row’ aligned when one of the <li>s is pushed down from the above element, instead of it pushing to the available space to the right.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 http://img835.imageshack.us/img835/9594/example1281542227415.png

    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>

    • 0