List doesn't display as grid with long texts - css

Question

I'm having a problem sorting this out, basically it will be a list with icons and text below. Icon size remains the same but the text doesn't, as shown in the picture
.
The problem is when a <li> has a lot of text the rest float to the right of it. How can I sort this out.
My code is below:
ul.iconifier {
width: 100%;
list-style: none;
margin: 0 auto; padding: 0;
}
ul.iconifier li {
float: left;
margin: 10px; padding: 0;
text-align: center;
border: 1px solid #ccc;
width:8em;
height:200px;
-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
display: block; /*--IE6 Fix--*/
height:101%;
}
ul.iconifier li a.thumb{
width: 128px;
height: 128px;
overflow: hidden;
display: block;
cursor: pointer;
}
ul.iconifier li a.thumb:hover {
}
ul.iconifier li p {
font: normal 0.75em Verdana, Arial, Helvetica, sans-serif;
margin: 0; padding: 10px 5px;
background: #f0f0f0;
border-top: 1px solid #fff; /*--Subtle bevel effect--*/
text-align:center;
width:118px;
}
ul.iconifier li a {text-decoration: none; color: #777; display: block;}
html:
<ul class="iconifier">
<li>
<img src="img/sprite.png" alt="Contacts" />
<p>English Depatment</p>
</li>
<li>
<img src="img/sprite.png" alt="Art" />
<p>Art Deptartment</p>
</li>
<li>
<img src="img/sprite.png" alt="Travel and Tourism" />
<p>Mathematics</p>
</li>
<li>
<img src="img/sprite.png" alt="Contacts" />
<p>Business Studies</p>
</li>
<li>
<img src="img/sprite.png" alt="Contacts" />
<p>English Depatment with a really long title that will hopefully fall</p>
</li>
<li>
<img src="img/sprite.png" alt="Art" />
<p>Art Deptartment</p>
</li>
<li>
<img src="img/sprite.png" alt="Travel and Tourism" />
<p>Mathematics</p>
</li>
<li>
<img src="img/sprite.png" alt="Contacts" />
<p>Business Studies</p>
</li>
<li>
<img src="img/sprite.png" alt="Contacts" />
<p>English Depatment</p>
</li>
<li>
<img src="img/sprite.png" alt="Art" />
<p>Art Deptartment</p>
</li>
</ul>

Answer 1

You need to use display: inline-block; instead of float to get them to push the row below them down for modern browsers. For IE6 & IE7 use display: inline.
Replace your ul.iconifier li with this code:
ul.iconifier li
{
margin: 10px;
padding: 0;
text-align: center;
border: 1px solid #ccc;
width: 8em;
-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
display: -moz-inline-box; /* mozilla only */
display: inline-block; /* for browsers that support display:inline-block*/
vertical-align: top;
}
Then add this code to make IE6 & IE7 work:
/* Show only to IE7 */
*:first-child + html ul.iconifier li
{
display: inline;
}
/* Show only to IE6 */
* html ul.iconifier li
{
display: inline;
}
I learn this approach from these sites:
http://gtwebdev.com/workshop/layout/inline-block-gallery.php
http://www.css-lab.com/demos/image-display/inline-block-caption.html

Answer 2

there is two ways the first one is using css by make a fix height for the small blocks with trimmed text to fixed length
the second solution is using the server side development code by adding a clear style to the first LI on the line (note: this solution is for a fix no. of blocks at line)

Answer 3

Not ideal, but you could make the elements all the same size, that way you'd never have a problem of things being floated to the right.
Try adding this to your CSS:
ul.iconifier li
{
margin-bottom: -5000px;
padding-bottom: 5000px;
}
That CSS should make the elements the same height.
Cheers, Sean

Answer 4

Perhaps you can use http://plugins.jquery.com/project/gridLayout