Nicely Aligned Products From A Database?

[justlukeyou]

Hi,

I am publising products from a database into boxes however the boxes are different heights based on the title. This is changing the height of each box and therefore misaligning the boxes on the next row.

Does anyone know how to neatly aligned the height of boxes as per following example regardless of home much content a single box has:

http://www.pinesolutions.co.uk/dinin...dining-chairs/

[r937]

there is nothing misaligned using IE9

[RyanReese]

there is nothing misaligned using IE9

He's using that site as an example.

[dresden_phoenix]

You have a couple of options.

the sample site , uses fixed heights. If you noticed the longer headlines run closer to the product shots. The box aren expanding at all, thus there is a set size to the grid object ( even if it were to be based on EMs , the height is still 'fixed') thus the grid is preserved that way.

A mixed method ( a lil clumsy with the mark up, and not supported by older browsers and IE) and would be to have your PHP output each row as a separate UL, then set the it to display table/ table-row... and set the LIs display:table-cell.

Hope that helps.

[justlukeyou]

Brilliant, thanks.

In the example how do they fix the height. I didn't think you fix the height of a div?

Do I just use this: height:100%;

If so is 100% a suitable height. How do I work out what height I set it to. Do I set the height of the DIV within the frame so:

Description: 20%
Image: 50%
Price: 20%
Then a spare gap at the bottom?

[dresden_phoenix]

Well it's LIs ( but any block element can have explicit dimensions )
width: (px, ems, %, etc.)
height: (px, ems, %, etc.)

ALSO , in case you didnt remember padding, border will add to the calculated dimension of the object. So... if you give it: height:100px width:50px and 10px of padding and a border of 2px then your actual object size on the screen is 74px X 124px, as an example.

NOTE that height% is calculated based on the width!!! Yah..it's nuts.. dont use %s for height.

Anyway, what I meant is size teh DIV or LIs that you're laying out specifically. For an over simplified example:

.productList li { height: 320px; width:160px; float:left; }

ADDENDUM:

if you set the height of the container LI to a specific NON % value. You can THEN use % for the child elements of the LI. Still not a wise idea .. but you can.

[justlukeyou]

Brilliant thanks, so I can fit the height in pixels. I have the width in %

If screensize changes will it keep the height in pixels so instead of looking nice and rectangular they look like tall vertical strips with the image squashed vertically?

[John_Betong]

Brilliant thanks, so I can fit the height in pixels. I have the width in %

If screensize changes will it keep the height in pixels so instead of looking nice and rectangular they look like tall vertical strips with the image squashed vertically?

Can you supply a link to the site or sample sizes of the images and the fixed container size?

I scale thumbnails with the maximum height and width set to 128px. Thumbnails in container size 132px.

The thumbnail is positioned with the following:

<a href='#'>
   title goes here
  <img src='thumb_nail.jpg' style='max-height:128px; margin:0 auto; text-align:center' alt='#' />
</a>