Javascript to change CSS left value from px to % based on browser size

Question

I have a div

#footer_container {
  position: fixed;
  width: 540px;
  height: 45px;
  margin-left: -270px
}

And I would like the CSS left value to be left: 50% for Browser-widths >1000px and left: 500px for browser widths of <1000px

I know this can easily be done with media queries but they are problematic and dont work with IE8.

Can someone please do this with javascript? Thanks

Answer 1

#footer_container {
    ...
    left: 500px;
}
@media all and (min-width: 1000px) {
    #footer_container {left: 50%;}
}

Works with CSS3-compatible browsers, updates automatically with no need for window.onresize or similar code... or indeed any code.