Results 1 to 4 of 4

Thread: float and centering

  1. #1
    Join Date
    Jun 2008

    float and centering


    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.

    Attachment 14883

    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?

  2. #2
    Join Date
    Mar 2012
    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?

  3. #3
    Join Date
    Jun 2008
    I can do it via javascript. I was hoping for a css trick.

  4. #4
    Join Date
    May 2012
    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;

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

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center