Related to the previous several posts jQuery comes with two functions that help you dynamically get the width and height of an element.

Have you ever asked about the width of an element in pixels which is 100% wide from the CSS? Well $.width() gives you the answer. Everything else is about experiments.

Let me explain you what was the case. I have to render 200 DIV elements, each with 2 pixels width and 30 pixels height. Thus you got something like a scale.

So far so good. The problem is that if you get some random width for the scale as the browser can be resized. If you’d like something like random space (gap) between the scale bars you get something like 7,35 pixels between every two bars.

Of course the browser cannot use non integer pixels so it starts to render gaps which are 7 pixels wide and in every few pixels it renders 8 pixel single gap. Thus he corrects this problem.

My advice is – don’t make the browser think and round the pixels. Use fixed integers to make browser flow faster. You can fix the whole width to be multiple of 200 pixels which is the number of bars.