title: Stretching a div horizontally
body: <p>I want to achieve a layout like this:</p>
  
  <p><a href="https://i.stack.imgur.com/6hI53.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6hI53.png" alt=""></a></p>
  
  <p>where following conditions are always satisfied (irrespective of browser width):</p>
  
  <ol>
  <li>Div1 and Div2 have equal heights (50%)</li>
  <li>Div 3 has a fixed width (50px).</li>
  <li>Div1 should fill the whole remaining width.</li>
  <li>Div4 is of fixed height (100px) and width (30px) and always in centre to the Div3 (horizontal </li>
  </ol>
  
  <p>and vertical)</p>
  
  <p>I do not want to use the CSS3 <code>flex</code> based display due to its unavailability on old browser. I tried to use the <code>display:inline-block</code>, but that does not stretch Div1 as desired. How can I achieve this layout without using javascript? Any help is much appreciated.</p>