Layout of my website - float left

Question

Can you look at table 7 in this page? http://www.gpahesapla.com/index.php?/functions/calculator

why does table 7 not float on left? It floats on left if i add a row in table 6. There should be two tables in a row always.

(To see tables plz select school: duglus; Faculty: Engneering; Department: Electronics

Moreover if anyone want to comment on GPA Box. It does not work in IE8 (may be fixed property does not work in IE8)

Answer 1

Table 5 is floated left, and Table 6 is shorter than Table 5. So this leaves a little bit of room for Table 7 to squeeze below Table 6. To fix this, just make sure to clear the float on your odd-numbered tables....

#table1, #table3, #table5, #table7 {
  clear: left;
}

A cleaner, more dynamic selector would use the nth-child pseudo-selector in combination with odd, but be aware this is part of CSS3 and therefore will not be fully supported by older browsers...

#tables table:nth-child(odd) {
  clear: left;
}

Answer 2

I cannot see the code - on view source it displays the code for the original page, before selecting any options. However I suspect that you do not have a div with clear: both after each "row" of tables. i.e. for every layer of tables, you need to have the aforementioned div.

I also suggest, to make it simpler to read, that you apply a class to each table instead of specifying #table th, #table2 th etc and then specify the following:

.className th|tr|td etc {
    properties;
}

If you dont get what I mean then please say so and I will expand on it some more.