html - How to incrementally resize div with browser window? -


i have div i'm trying make incrementally wider browser window resized. is, every 50px wider window is, i'd div's width increase 50px well.

since width in increments, can't define in terms of percentages. right i'm using media queries, in order make work, i've had write ton of similar cases , behaves inconsistently in different browsers.

i can't edit javascript. there more programmatic way can in pure css?

here's code.

div {   background-color: #f00;   height: 100px; }  @media (max-width: 1600px) {   div {     width: 800px;   } }  @media (max-width: 1550px) {   div {     width: 750px;   } }  /* ... */  @media (max-width: 800px) {   div {     width: 0;   } } 

well there's news , bad news. news there mod operator used incremental sizes:

width: calc(500px + (100% mod 50px) * 50px); 

the bad news, however, isn't supported browsers. i've read around internet, internet explorer , firefox kinda support it, couldn't working on safari/webkit, when using -webkit prefix.

edit: after poking around more, mod used in specification in 2006 as of 2013 it's been dropped :(


Comments

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -