I am trying to dynamicly change the width of a div using CSS and no jquery. The following code will work in the following browsers: http://caniuse.com/calc
/* Firefox */
width: -moz-calc(100% - 500px);
/* WebKit */
width: -webkit-calc(100% - 500px);
/* Opera */
width: -o-calc(100% - 500px);
/* Standard */
width: calc(100% - 500px);
I want also support IE 5.5 and higher, i found the following: expression. Is this the correct usage:
/* IE-OLD */
width: expression(100% - 500px);
Can I also support Opera and the Android browser?
Best Answer
Almost always
box-sizing: border-box
can replace a calc rule such ascalc(100% - 500px)
used for layout.For example:
If I have the following markup:
Instead of doing this: (Assuming that the sidebar is 300px wide)
Do this:
PS: I won't work in IE 5.5 (hahahaha) , but it will work in IE8+ , all mobile, and all modern browsers (caniuse)
Width Demo
Height Demo
I just found this post from Paul Irish's blog where he also shows off box-sizing as a possible alternative for simple calc() expressions: (bold is mine)
NB: The above technique does indeed look the same as would a corresponding calc() statement. There is a difference though. When using a calc() rule the value of the width of the content div will actually be
100% - width of fixed div
, however with the above technique, the actual width of the content div is the full 100% width, yet it has the appearance of 'filling up' the remaining width. (which is probably good enough for want most people need here)That said, if it is important that the content div's width is actually
100% - fixed div width
then a different technique - which makes use of block formatting contexts - may be used (see here and here for the gory details):1) float the fixed width div
2) set
overflow:hidden
oroverflow:auto
on the content divDemo