Geek asks and answers

Dynamic Element Width and IE9 Subpixel Accuracy

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

#left and #right have little content, say 50px each, and I show them in full.

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

I swam #left and #center 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>

Violin example

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

2: CSS, jQuery . , IE9.

IE9 , , jQuery .

: IE9 , #left 50.5 , jQuery , 50 . IE9.

JavaScript, , IE9?

+5
3

, , , IE9 float, , jQuery :

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

#element IE9 50.5px, jQuery , jQuery, 50px.

+1

:

main = $("#main").width();
centerWidth = main - ( $("#left").width() + $("#right").width() );
$("#center").width(centerWidth);


main = parseFloat(document.getElementById("main").style.width)
centerWidth = main - (parseFloat(document.getElementById("left").style.width) + parseFloat(document.getElementById("right").style.width));
document.getElementById("center").style.width = centerWidth + "px"
0

:

el = $('#myelement');

//Hello IE9-10 and float "width", e.g. 83.41px;
try {
  var elWidth = Math.ceil(parseFloat(getComputedStyle(el[0]).width)); 
} 
//But old browser doesn't know "getComputedStyle()" e.g. IE 8 and oldest;
catch (e) {
  var elWidth = el.width(); 
}

elWidth; //IE 9-10 return 84px, other browsers 83px;
0

More articles:


All Articles