#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Location
    A small white padded room.
    Posts
    2
    Rep Power
    0

    [SOLVED] Multi-column layout centering w/o explicit width


    Is there a way to center 4 columns on a page without specifying the width?

    I'm trying to convert a page I have from HTML4/Trans to HTML5. I was relying on tables to do the layout, but I'm trying to use CSS now.

    So, I have several lists of codes for old games. These codes are in a table. There are four tables that I want to put side by side, but centered in the page.

    If I only have two tables, I can put them in two columns, and give the first table the float right property, which ends up giving me two centered tables. I cannot figure out how to do with with 4 tables though.

    technoplaza.net/temp/test.html

    This shows a demo of what I'm trying to achieve. The 4 tables on the second "row" are centered, but only because I explicitly size the container div as 870px. However, this size doesn't work when I put it in the rest of my layout. It needs to be 760 pixels at that point. So I want to take out the size altogether, but keep the centering.

    Is this possible?
    Last edited by jdratlif; June 3rd, 2013 at 07:47 AM. Reason: added solved to title
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    162
    I can't say I've tried this but I found this method that would allow for non-specific width centering. The red div on that page would be the div you've currently got the 870px width set on.

    A workaround would be to try to remove 110px worth of paddings/margins so that the 4 columns would fit inside the space of 760px. Their combined widths+left/right margins+left/right paddings seems to be about 870px currently and don't fit in 760px of space, so they end up behaving strangely like shrinking and dropping down.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Location
    A small white padded room.
    Posts
    2
    Rep Power
    0
    Originally Posted by LDHosting
    I can't say I've tried this but I found this method that would allow for non-specific width centering. The red div on that page would be the div you've currently got the 870px width set on.

    A workaround would be to try to remove 110px worth of paddings/margins so that the 4 columns would fit inside the space of 760px. Their combined widths+left/right margins+left/right paddings seems to be about 870px currently and don't fit in 760px of space, so they end up behaving strangely like shrinking and dropping down.
    That first method worked perfectly. Thanks.

    The second thing...I think maybe I wasn't clear. I'm not saying it doesn't fit because it's too big. I'm saying when I put those same tables into my layout, they literally take up less space, and so I have to use a different size to test things than I do in my actual page. I tried including my entire template.css in the demo to see if that makes a difference, but it does not. I'm not sure what makes that happen, but I'm worried it could mean they are different sizes in different places, so that's why I didn't want to use explicit sizing. That worry may have been unfounded, but I still prefer the browser to figure out how large the div should be.

IMN logo majestic logo threadwatch logo seochat tools logo