Items not floating correctly


I’m having trouble floating some unordered lists within a div, I want there to be four lists on one level and then four others to float beneath them…

the example of this is on the bottom of the following page

Website Example

Each list as been placed within a div called departmentListColumn

Any help would be great…


The easiest solution would be that after the fourth item you add a full width clearing div so that the next four elements don’t snag.


… four uls here

<div style="clear:both"></div>

… four more uls

Alternatively you would need to ensure that all uls were exactly the same height so that they don’t snag when they wrap.

Or use display:inline-block instead of float but then you would have to hack for ie7 and under and FF2.