css - Javascript - Dynamic div width depending on page size -

I need to set the width of a div based on the page size.

I have three pillars. 50px is defaulted in first and third I need to set my arbitrator, so it will take all the space with a little margin. I do not know how to do this in CSS. So I tried to reduce the window.innerWidth and two 50px using Javascript.

This is my CSS:

  & lt; Div class = "col1" & gt; ... & lt; / Div & gt; & Lt; Div class = "col2" & gt; & Lt; Div class = "col2-1" & gt; ... & lt; / Div & gt; & Lt; Div class = "col2-2" & gt; ... & lt; / Div & gt; & Lt; / Div & gt;   
 More related javascript  
  & lt; Script type = "text / javascript" & gt; SetStoreInfoWidth = function () {$ ('div.col2-1'). CSS ('width', window.innerWidth-100 + 'px')}; SetStoreInfoWidth (); $ (Window). Reset (function () {setStoreInfoWidth ();}); & Lt; / Script & gt; Here is a JS field working code:  
 However, I can not work on my actual website.  
 Why do you have any ideas?   
 
 
 You can use negative margins to create 3 column layouts:  
  
  & lt; Div class = "container" & gt; & Lt; Div class = "leftCol" & gt; Left luggage & lt; / Div & gt; & Lt; Div class = "rightcol" & gt; The right material & lt; / Div & gt; & Lt; Div class = "middlecol" & gt; Middle Goods & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div style = "background-color: # 0000bbi; clear: both;" & Gt; Test & lt; / Div & gt;   
 CSS:  
 . Container {width: 100%; Status: Relative; }. LeftCol {float: left; Margin-right: -50px; Width: 50px; Left: 0 pixels; Min-height: 100px; Background color: # FF0000; } .rightCol {width: 50px; Margin-left: -50px; Correct: 0 pixels; Min height: 50px; Background-color: # 00FF00; float right; } .middleCol {margin: 0px 55px 0px 55px; Background color: # 0000FF; Min height: 50px; }