Распределение ширины двух блоков на одной линии (css/html)

Есть два блока inline-block. У одного ширина фиксированная у другого задана в процентном соотношении, как сделать так чтобы они оба располагались на одной линии?

<div class='main' style='width:100%'>

  <div class='menu' style='width:200px'>

  </div>

  <div class='content' style='width:100%'>

  </div>

</div>

На этом примере блок .content растягивается во всю ширину окна, т.е. 200px лишние, как сделать так, чтобы оба блока оставались на одной линии и заполнялись по всей ширине окна?

p.s. я написал скрипт, который вычисляет нужную ширину для блока .content, но при масштабировании окна браузера (например колесиком мыши), видна погрешность у блока в несколько пикселей, и к тому resize в ie 8 у меня не работает:

(function($){	

    var docW = null,

        cW = null;

    

    $.Main = {

        init: function(){

            $.Main.blockAligment(false);

            $(window).resize(function(){$.Main.blockAligment(true);});

            

            return $.Main;

        },

        

        blockAligment: function(resize){

            var wrapW = $('.wrapper').width(),

                menuW = $('.menu').width(),

                contentW = Math.floor(parseInt(wrapW-menuW));

            

            if(resize){

                if($(document).width()>docW){

                    contentW-=2;

                }else if($(document).width()<docW){

                    contentW++;

                }

            }

            $('.content').width(contentW);

            if(!resize){

                docW = $(document).width();

                cW=contentW;

            };

            

            if((cW-contentW)<5){

                contentW=cW;

            }

            

            console.log(contentW,docW,$(document).width())

        }

    };

})(jQuery);

Как выйти из ситуации? Есть ли способ решить проблему на чистом CSS?