Dynamic element width and IE9 subpixel precision

Question

I have 3 divs, #left, #center and #right that I want to position on the same line which has a specific width, say 300px.

#left and #right have little content, say 50px each, and I am displaying them fully.

#center has a lot of content, say 400px, and I want to display as much as possible within the remaining space on the line. For this, I have included the content of #center within #inner.

I have floated #left and #center to left and #right to right.

<div id="left">
    LEFT
</div>
<div id="center">
    <div id="inner">
        LONG CONTENT ...
    </div>
</div>
<div id="right">
    RIGHT
</div>

Example fiddle

Question 1: Is there a way of making the #center div take all of the available remaining space on the line through CSS (in our example, #center has to be 200px wide - the width of the line, 300px, minus the width of #left and #right, each 50px) ?

Question 2: I did not find a solution through CSS and I have used jQuery to dynamically calculate the remaining available space. This works ok in all browsers except IE9.

The problem with IE9 is that it has subpixel precision and jQuery returns only integer values for the dimensions of elements.

Here's an example: IE9 sees #left as having 50.5px width while jQuery sees it as having 50px. This difference causes the layout to break in IE9.

If I need to calculate the available space through JavaScript, what can I do to overcome this IE9 issue ?

Answer 1

For future reference, what I did was to force the width that IE9 sees as a float to the value that jQuery sees as an integer:

var elem = $("#element");
elem.css("width", elem.width());

If #element had a value seen by IE9 as 50.5px, jQuery forces a value upon it that jQuery sees, 50px.