Forums

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 :

<div class="tleft">
<table style="width: 40%">
<tr>
..
</table>
</div>

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 :

<table id="tr1">
</table>

<table id="tr2">
</table>

<table id="tr3">
</table>

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

<div id="left">
<table>
</table>
</div>

<div id="right">
<table>
</table>
</div>

<div id="left">
<table>
</table>
</div>

<div id="right">
<table>
</table>
</div>

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

treehouse : what would you like to learn today?

Forums

[Solved] Two Column Table Float Problem