Forum Moderators: not2easy
I gots problems.
Essentially, a category index for my website dynamically outputs nine unordered lists. The aim is to have these displayed in the sort of 3x3 grid that would take 12 seconds to do in tables.
To this end, the <ul>'s are
float: left;clear: left;The theory being it would skip down to a 'new line', so to speak, clearing all three lists and draw another three staring from the left-most side. This only seems to work in Firefox assuming that no list to the left of the cleared div is shorter than the other one.
That is, say the first list is huge, the second small and the third tiny. Rather than place the fourth list underneath the first as I want, it places it underneath the third list, and the next one underneath the second list, both with the original first list still running down to the left of them.
It seems Firefox only clears the float immediately to the left, which may well be the correct behaviour. Certainly IE6 displays the current code the way I want it to, which normally means my code is incorrect rather than Firefox's handling of it.
I struggled with this problem last time I redesigned my site and gave up on it, but I'd really rather not have to insert just one batch of tables for what seems like a trivial problem.
But a problem I can't solve. I hope the above description isn't too incomprehensible, and further throw myself on your mercy. Any help would be gratefully received.
Thanks,
Scott
Or put the each of the three lists in their own <div>, and declare for the second <div style="clear: left;">. (I would lean toward this one, but don't know what else has to be considered with your page.
There are several options, but I would lean toward putting each grouping in its own box to make things more controllable.
<edit> Ronin was quicker. Also an option. You've got choices. </edit>
I gots problems.
ul {
width:33.2%;
}
div {
clear:both;
}
<ul> ... </ul>
<ul> ... </ul>
<ul> ... </ul>
<div></div>
<ul> ... </ul>
<ul> ... </ul>
<ul> ... </ul>
<div></div>
<ul> ... </ul>
<ul> ... </ul>
<ul> ... </ul>
<div></div>
Span - that's essentially the markup I was using, but resulting in the problem described above.
Putting each of the 'rows' of three in their own div, cleared or floated doesn't change anything. Which is odd, I'll need to go back and check there's no conflicting statement elsewhere I've forgotten about, but I don't think there is.
As the length of the lists will vary over time as articles are added, I can't see a way to define the height of anything in the page.
<html>
<head>
<style>
ul {
float: left; border: .1em solid #000; width: 150px; margin: .4em; padding-left:1.5em;
}
.clear {
clear: left;
}
</style>
</head>
<body>
<div>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="clear">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul>
<li>item</li>
<li>item</li>
</ul>
</div>
<body>
</html>
I added the border so that I can observe what is happening. Because I added the border, then I needed to tweak up the margin and padding to get it all rendering nicely between FF, Opera, and IE, all of which would ohterwise render the display a bit differently. Adjust as necessary.
Thanks, D_Blackwell, and everyone else.
