float and centering

[asmith20002]

Hello,

I have this page which lists products. Each product is a div with 250px width and they are all floating left. So depending on the user's browser width, they see 3, 4, 5 ... products per row. If they resize their browser, the items in each row get less or more depending on the size. That is how float acts naturally.

So the problem I have is that in each row, there's a space at the right smaller than the item box side (250px) because no item could fit. I want to center the whole menu (row) so that this space gets split in half and goes on both sides.

Image2.jpg

If I specify fix width for menu (row), I can center it with margin: auto, but then I'll limit users with other browser sizes to see fix number of items per row. So a user who could see 5 items per row, would be forced to see 3 items and huge space on sides.

Any solution for me?

[jedaisoul]

One solution seems to me to be: let the users select how many columns they want. If that is done in PHP, it can work the same as fixed width. Presumably it could be done in javascript as well?

[asmith20002]

I can do it via javascript. I was hoping for a css trick.

[PlecPicker]

Maybe a quick check to see what page width their displaying in
and then margin appropriatly...

This looks like the job

<script type="text/javascript">
<!--
var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
//-->
</script>

edit, hmm, didn't fully ready ALL your posts, ahwell sorry XD


Im not too good in js attal, hope this is right.