When 8 columns are floated next to 4 columns to form the full 12 columns of the container, there is a small dead pixel on the right that appears and reappears as you scale the browser. This seems to be due to rounding and decimal place issues.
The grid this is on is a custom fluid grid created by a different front end dev. It appears and disappears as you drag the window. Occasionally it's there, sometimes it's not.
I've looked into altering the % of this grid and it simply does not resolve this issue. Any ideas?
Here is an example of a custom grid which was generated for me by a tool. Using these numbers does not fix the 1px issue.
Span 1: 8.33333333333%
Span 2: 16.6666666667%
Span 3: 25.0%
Span 4: 33.3333333333%
Span 5: 41.6666666667%
Span 6: 50.0%
Span 7: 58.3333333333%
Span 8: 66.6666666667%
Span 9: 75.0%
Span 10: 83.3333333333%
Span 11: 91.6666666667%
Span 12: 100%
jeromeM's answer was correct. I pulled this from Foundation:
[class*="column"] + [class*="column"]:last-child {
float: right;
}
The last column should always be floated right to resolve this issue. The 1 pixel will be taken care of by the last column floating right.