Two Column Table Float Problem

[MBM]

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 :

..

[Paulie_D]

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]

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.

[Paulie_D]

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]

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;}

[Paulie_D]

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]

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 :

[Paulie_D]

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]

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.

[Paulie_D]

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

OK…lemme think.

[MBM]

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

[Paulie_D]

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

[Author]

Posts