Inconsistent and unexpected behavior with CSS max-width property across browsers

I'm building a tool that manipulates the DOM on existing webpages via a bookmarklet and I'm running into problems setting the max-width on certain sites.

My goal is to resize any page to so that the maximum width is 980px.

Giving the body a max-width of 980px, however, behaves erratically. On some pages it works perfectly and on others some of the elements get repositioned based on the new width and others don't.

Take Google.com, for example. In each of the following screenshots I've given the body a max-width of 980px开发者_JS百科. I also manually added a blue line showing where 980px should be.

In Chrome:

Note how the toolbar at the top of the page is not resized and the search field area is still centered based on the original width, not the new 980px width.

In Firefox:

Note how the search area is repositioned, but the toolbar, like Chrome, remains the full width of the document.

Is there anything I can do so that the pages are correctly resized to 980px across all sites and all browsers?

---

Short of using javascript, I don't think there is a cross-browser solution using only CSS. max-width is not supported on all browsers.

---

Okay, I don't know how to get min or max width consistently across browsers in pixels, but I wanted to share this, as I looked for hours on how to properly do this, and instead ended up, for my application, to discover that aspect ratios are consistent across browsers and can be indirectly used to limit the min/max size of a div, this is the code that worked for me, maybe it will be helpful to someone:

  w = $(window).innerWidth();
  h = $(window).innerHeight();
  ratio = w/h;
  if (ratio<1){
  $('.classdivtofix').css('min-width', $(window).innerWidth()/ratio);