How to set up partially fluid layout (IMAGE)

Question

I have a problem with setting up a layout for my design.

I want to have two div's, left and right. And i want them to fill left and right side, but stay in the same position in the center.

Left div will have content only in "always visible" 300px (this page in not for mobile). But in right DIV I want to have content based on %, to expand with larger screens. And on the smaller screens I don't want to have w horizontal scroll bar at the bottom.

Can someone point me to the best solution?

Many thanks!

Answer 1

FIDDLE

Html will be :

<div class="left">Test</div>
<div class="right">Test</div>

CSS will be :

.left {width:300px; background:#FF0000; min-height:400px; float:left; }
.right { background:#00FF00; min-height:400px;  }

Answer 2

I think I came up with a solution. So, HTML :

<div class="left"></div>
<div class="right"></div>

Css:

.left { 

  width:300px;
  position:fixed;
  top:0px;
  left:0px;
  height:100%;
  background:blue;

}

.right {
  width:900px;
  background:red;
}

JavaScript :

$(window).ready(function() {
            var hWind = $(window).height();
            var wWindow = $(window).width();
            var toDistribute = wWindow - 1200;
            if (toDistribute > 0) {


                var addToBoth = toDistribute/2;
                var lW = $('.left').width();
                var rW = $('.right').width();
                $('.left').width(lW+addToBoth);
                $('.right').width(rW+addToBoth);
                $('.right').css('margin-left',lW+addToBoth);
            }
        });