CSS: Unordered list alignment - html

Question

Consider the following Fiddle: http://jsfiddle.net/wNrqu/
For the last 4 hours I have been trying to do something like this:
I'm trying to make the list display four items per 'row' with the two spans's centered underneath the image. The text must be able to wordwrap. CSS is one tricky beast to master!
If you check out the Fiddle, my result is somewhat odd. Items with larger text cause a blank gap to be inserted...

Answer 1

<div id="container">
<div><img src="kitten.png" />Cute Kitten<br />yes</div>
......
</div>
Then in your CSS:
#container {width: 1000px;}
#container > div {display: inline-block; width: 250px; text-align: center;}
That should do it. Much easier than using an unordered list because then you don't have any styles that a list has by default that need overriding.

Answer 2

If I'm doing this css, I will not using the order list, I will using div. Maybe this will help you.
<div id="container">
<div class="row clearfix">
<div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p> <p>yes</p></div>
<div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
<div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
<div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
</div>
</div>
then in the css
#container {width:1000px;}
.img {width:133px; height:200px; margin-right:20px;}
.img p{text-align:center;}
.fleft{float:left;}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}

Answer 3

Please refer the following location:
http://jsfiddle.net/wNrqu/

Answer 4

Thanks for the help...although I didn't ask the question initially.
So far, it's working fine although I wanted to center everything so :
I changed the CSS from
#container {width: 1000px;}
#container > div {display: inline-block; width: 250px; text-align: center;}
to:
#container{margin: 0 auto;width: 1000px;}
#container div {display: inline-block; width: 150px; text-align: center;}