This gallery is simple. It has fixed width and height. We can easily style this by putting this code. 

ul.gallery, ul.gallery li, ul.gallery p{
margin:0;
padding:0;
list-style:none;
font:12px/16px Arial, Helvetica, Verdana;
}

ul.gallery li{
float:left;
width:80px;
height:80px;
margin:20px 20px 0 0;
}

Enough! Your gallery is ready!!

But!!!

Assume that each flower have a lot of description. Or the flowers name is little bit bigger. How we can manage with CSS? if the description is little bit lengthy it may looks like this… 

Here comes a simple solution to prevent this.
 

Ul.gallery li{
margin:20px 20px 0 0;
width: 80px;
min-height: 80px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
_height: 80px;
}

I am now trying to explain this code a little bit. I hope you are an intermediate level of CSS programmer. So I am not explaining each line of code. You people may be doubtful about the following properties.

display:-moz-inline-stack; what does it mean? Mozilla Firefox2 doesn’t support inline-block at all, but they have -moz-inline-stack which is about the same. That’s why we are using –moz-inline-stack.

The next line code is display:inline-block. As it sees it is an inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

zoom:1 Zoom property is non existent property in modern browsers.  But here we are using this for fix has layout problem of Internet Explorer. It will fix the absence of inline-block in Internet Explorer. *display:inline is also needs to fix this.

Hope you know the margin, width, min-height, vertical-align, properties of CSS. And the underscore hack of ie6.

And definitely it is not a valid CSS. But it will work with most of the browsers.

Here goes the final code

CSS

ul.gallery, ul.gallery li, ul.gallery p{
margin:0;
padding:0;
list-style:none;
font:12px/16px Arial, Helvetica, Verdana;
}

ul.gallery p{
text-align:center;
}

ul.gallery li{
margin:20px 20px 0 0;
width: 80px;
min-height: 80px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
_height: 80px;
}

HTML

Yellow Rose

Red Rose!! waooo it is a nice rose


Flower



Yellow Rose



Red Rose



Flower



Yellow Rose



Red Rose



Flower

Download the source code