I have an unordered list containing several items, each with a variable amount of text inside. Each item has a fixed-width, and my list is also fixed-width to ensure that 4 'columns' are displayed. Each item is floated left.

Since items are variable-height, I need to clear the first item in each row (after the first row) to avoid this problem. However, this still causes issues in IE7. How can I fix that problem?

HTML

<ul>
    <li>First</li>
    <li>Another</li>
    <li>...</li>
</ul>

CSS

ul { list-style-type: none; border: 1px solid black; overflow: hidden; padding: 0; width: 560px; }
li { float: left; background-color: #eee; width: 100px; padding: 10px; margin: 10px; }

3 answers

4
points
This was chosen as the best answer

Can I suggest not using floats at all, try inline-block instead:

li { display: inline-block;  vertical-align: top; ...}

You can also trick IE7 into supporting it, so I added that hack into a style sheet inside conditional comments in my example.

Answered over 6 years ago by Rob Crowther
  • This looks like it's going to be the winner - even though I despise hacks! Bobby Jack over 6 years ago
0
points

This is a tricky one to tackle I think. I've had a couple of cases on my hands where we had these problems as well. I can think of 2 solutions: 1. Give each box a fixed height (this is nasty, I know...) 2. Create container div's or seperate UL elements for each row. This way the height of your boxes can differ, but they will display under each other nicely.

Example for option 2 would be:

HTML

<ul>
  <li>First</li>
  <li>Second</li>
</ul>
<ul>
  <li>Third</li>
  <li>....</li>
</ul>

CSS:

ul{
  list-style-type:none;
  float:left;
  clear:both;
  width:560px;
}
li{
  float:left;
  background-color:#eeeeee;
  width:100px;
  padding:10px;
  margin:10px;
}

None of them wins the beauty award, they clearly have some disadvantages, but it gets the job done.

Answered over 6 years ago by Joost Smit
  • Hi Joost. Thanks for the response. Option 1 is, as you say, "nasty", so I'll leave that one there! I'd considered Option 2 but this list is shared via the CMS I'm using, and the content really needs to be in a single list. For the same reason, I can't just put in an empty item which is full width and cleared - the content really needs to be as 'clean' as it currently is. I'm not even a massive fan of fixing the grid to 4 columns, but - in this particular case - that's a concession I am willing to make. It's such a shame that this kind of layout isn't easier (possible?) since it's - surely - a pretty common use-case. Bobby Jack over 6 years ago
GaVrA 5
0
points

If you want 4 li's in a row, just add class clear to every 4th li.

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li class='clear'></li>
    <li></li>
    <li></li>
    <li></li>
    <li class='clear'></li>
    <li></li>
    <li></li>
</ul>

And add this to your css:

.clear{
clear:both;
}
Answered over 6 years ago by GaVrA
  • That's exactly what I have, but it fails in IE - see the second link in the question. Bobby Jack over 6 years ago