Grow your CSS skills. Land your dream job.

Two Column Table Float Problem

  • MBM
    # September 4, 2012 at 12:32 pm

    I have created a set of tables to display football (soccer) fixtures. I want sets of two tables adjacent to each other. If I use div or table id the tables float correctly but I get duplicate id validation errors. When I use div class instead the tables do not float. div class and table id can be seen here :

    http://soccer-europe.com/seriea/Fixtures.html

    The table css :

    #tleft {
    float:left;
    width:400px;
    }

    #tright {
    float:right;
    width:400px;
    }

    HTML :




    ..


    # September 4, 2012 at 1:53 pm

    I don”t see the problem. Put each table in it’s own div (with separate IDs) and float them.

    You can still give each table it’s own ID.

    http://codepen.io/Paulie-D/pen/aGtzH

    MBM
    # September 4, 2012 at 1:57 pm

    There will be 38 tables in total on one page. That’s why I don’t want to use separate IDs or divs for each table. Admittedly it’s only half a line of css for each div but I thought there would be a simpler solution.

    # September 4, 2012 at 2:05 pm

    You don’t have to give the tables IDs if you don’t want to but if you want to target a specific table in your CSS you will probably have to.

    Pen updated to give tables a class instead of ID.

    http://codepen.io/Paulie-D/pen/aGtzH

    MBM
    # September 4, 2012 at 2:12 pm

    I have to target each table, alternating between floating left and right. This does the trick and is only 2 lines of code :

    /*Table Float*/
    #tr1, #tr3 , #tr5, #tr7, #tr9, #tr11, #tr13, #tr15, #tr17, #tr19, #tr21, #tr23, #tr25, #tr27, #tr29, #tr31, #tr33, #tr35, #tr37 {float:left;width:400px;}

    #tr2, #tr4 , #tr6, #tr8, #tr10, #tr12, #tr14, #tr16, #tr18, #tr20, #tr22, #tr24, #tr26, #tr28, #tr30, #tr32, #tr34, #tr36, #tr38 {float:right;width:400px;}
    # September 4, 2012 at 2:19 pm

    No. You don’t float the tables. You only float the two divs. Each table sits inside either a left or right column div.

    See the example. 2 IDs only…one for each div.

    MBM
    # September 4, 2012 at 2:38 pm

    As each div needs a unique ID you would have to name 38 different divs and use an opening and closing div for each table which means more code. This code validates :









    Whereas this would give duplicate ID validation errors, which was the original problem :













    # September 4, 2012 at 2:38 pm

    Why would you create 38 divs? You only need two to contain 19 tables each.

    That’s 2 ids only and you don’t have to give each table an ID.

    See: http://codepen.io/Paulie-D/pen/aGtzH

    MBM
    # September 4, 2012 at 3:22 pm

    IF the fixtures were read top to bottom that would be the ideal solution but they’re read from left to right so you would need to use the left div class for the fixtures for the odd numbered rounds and the right div class for the even which means more work e.g. I would have to enter round 1 in the left div class, round 2 in the right then go back up into the left div class to enter round 3 then down into the right to enter round 4 etc, etc.

    # September 4, 2012 at 3:30 pm

    That’s whole different problem. I thought it was a display issue you were having.

    OK…lemme think.

    MBM
    # September 4, 2012 at 3:40 pm

    It was a display & validation issue but it’s sorted now so there’s no need to rack your brains!

    # September 4, 2012 at 3:48 pm

    Ok…here you go…two table classes only. http://codepen.io/Paulie-D/pen/sFGpH

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".