Broken layout with dimensions in percentages

[mcm-ham]

I have an UL with 9 LI items laid out more or less like the image on the project's homepage. The difference is that UL has width and height set to 100% within a fixed-dimension container, and all LI items have width and height set to 33.33% and floated left.

What happens is that layout becomes broken in various ways when placeholder replaces one of the LI elements. I managed to fix this by removing the .css(...) part on line 124 (I am using the version of the code that can be downloaded from the download section).

I assume that the calculated width/height that jQuery returns doesn't exactly match the way browser calculates 33.33% in this case.

Here is the relevant CSS I use:

.shuffleboard {
position: relative;
padding: 1em;

}

.shuffleboard ul {
position: relative;
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;

}

.shuffleboard li {
list-style: none;
float: left;
width: 33.333%;
height: 33.333%;
position: relative;

}

This work item was migrated from CodePlex

CodePlex work item ID: '33636'
Vote count: '1'