Help me in gallery photo page layout

Dear Friends,

Please help me in css to make a gallery view with a fixed width and auto height

this code i m using to create gallery

<div style="width:1024px; margin:auto">
<div style="width:225px; height:300px; background-color:#CCCCCC; float:left; margin:10px;">
</div>

<div style="width:225px; height:200px; background-color:#CCCCCC; float:left; margin:10px;">
</div>

<div style="width:225px; height:250px; background-color:#CCCCCC; float:left; margin:10px;">
</div>

<div style="width:225px; height:300px; background-color:#CCCCCC; float:left; margin:10px;">
</div>


<div style="width:225px; height:400px; background-color:#CCCCCC; float:left; margin:10px;">
</div>

<div style="width:225px; height:400px; background-color:#CCCCCC; float:left; margin:10px;">
</div>

<div style="width:225px; height:400px; background-color:#CCCCCC; float:left; margin:10px;">
</div>

<div style="width:225px; height:400px; background-color:#CCCCCC; float:left; margin:10px;">
</div>

<div style="width:225px; height:400px; background-color:#CCCCCC; float:left; margin:10px;">
</div>
</div>

Preview of this code

I want div like this

I’m awaiting the attachments to be approved, but here are some examples while we wait.

http://pmob.co.uk/pob/disjointed1.htm
http://www.pmob.co.uk/temp/gallery-rollover.htm

Is that all the HTML/CSS we will need to recreate your issue (whatever that is?)

Thank you for your time but i dont want any photo gallery i want to create a product gallery page like ebay.in home page

In this gallery a div width is fixed 225px and height is auto.

Please check home page of ebay.in i hope you will undertstand how can you help me.

The way they do it is to absolutely position everything.

If I were you, I’d create (lets take ebay.in as example) 4 columns of equal width and stack the items down the list. Trying to use floats to achieve what ebay.in has would be difficult as the floats would snag on each other and you’d be messing with margins trying to line everything up.

I already use float,position etc but i dont got that thing please help me ASAP

I just instructed you on what to do :). Here is the pseudo code.


<column1>
   <div></div>
   <div></div>
   <div></div>
</column1>
<column2>
   <div></div>
   <div></div>
   <div></div>
</column2>
<column3>
   <div></div>
   <div></div>
   <div></div>
</column3>
<column4>
   <div></div>
   <div></div>
   <div></div>
</column4>

sir i want a product display page which is dynamic. That page contain product image with product small details the product image width is fixed 225px but height of product image is auto so the problem is this when i am using float left after div image come down and take max-height box space .

Please check my attachment which i was attach in my first post. that screenshot clear what i need.

Thanks for giving you important time.