I'm working on making a catalog page that utilizes a large UL list, with all LIs displayed block and floated left, to make a flowing grid layout. (What's the common name for this?)

It looks and works wonderfully in the browser, but turns into a smash-up when it's printed, especially on (gotta love it) IE. Being that the list is a flat structure, my only real options in a print stylesheet are to have it either as unfloated blocks (forming one long column) or to rework the HTML into something with rows (multiple ULs or a table) then disable the row-forming elements when showing the page on screen.

So far, I've resorted to a workable, but certainly not optimal, single-column print stylesheet, and probably just having a link to the source PDFs (from which the website was made) as a printable option.

Is there any discussion or solution out there regarding this, or does anyone have any ideas?


Example HTML:

...
<ul class="flowgrid">
<li>
<img src="...">
Color<br />
Cat No.
</li>
<li>
<img src="...">
Color<br />
Cat No.
</li>
<li>
<img src="...">
Color<br />
Cat No.
</li>
<li>
<img src="...">
Color<br />
Cat No.
</li>
<li>
<img src="...">
Color<br />
Cat No.
</li>
...etc...
</ul>
...

Example CSS:

ul.flowgrid {
margin: 0px;
padding: 0px;
list-style-type: none;
display: block;
}

ul.flowgrid li {
margin: 0px;
padding: 0px;
display: block;
float: left;
}

ul.flowgrid li {
width: 17em;
min-height: 15em;
margin: 0px 2em 2em 0px;
text-align: center;
}