Forums - CSS - Two Column Table Float Problem

Home › Forums › CSS › Two Column Table Float Problem

• This topic is empty.

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

• Author Posts
• September 4, 2012 at 12:32 pm #39660 MBMParticipant

  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 #109038 Paulie_DMember

  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

  September 4, 2012 at 1:57 pm #109033 MBMParticipant

  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 #109034 Paulie_DMember

  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

  September 4, 2012 at 2:12 pm #109029 MBMParticipant

  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 #109032 Paulie_DMember

  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.

  September 4, 2012 at 2:38 pm #109005 MBMParticipant

  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 #109007 Paulie_DMember

  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

  September 4, 2012 at 3:22 pm #109011 MBMParticipant

  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 #109013 Paulie_DMember

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

  OK…lemme think.

  September 4, 2012 at 3:40 pm #109015 MBMParticipant

  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 #109018 Paulie_DMember

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

• Author Posts

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

• The forum ‘CSS’ is closed to new topics and replies.