Reputation: 53396
Fluid inline list and row alignment
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.
Upvotes: 2
Views: 1340
Answers (1)
Reputation: 4483
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>
Upvotes: 2