title: fluid openlayers - responsive design
body: <p>I am trying to have my openlayers map fit the size of the browser and also resize every time the browser resizes. So I can have responsive design.</p>
  
  <p>My structure of code is like so</p>
  
  <pre><code>&lt;script type='text/javascript' src='OpenLayers.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
  
  
  var map;
  var options = {   
    controls: [],
    maxResolution: "auto",
    projection: "EPSG:900913",
    units: 'm'
  }
  
  function init(){
   map = new OpenLayers.Map('map_element', options);
   //set layers, styles for vectors layers, set and activate click events etc.
  }
  
  &lt;/script&gt;
  
  
  &lt;body onload='init();'&gt;
  
  &lt;div id='map_element' style=" width:800px; height:400px ; z-index:1; position: relative;text-align:center;"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>According to <a href="https://gis.stackexchange.com/questions/31409/openlayers-redrawing-map-after-container-resize">this</a> I tried using</p>
  
  <pre><code>//if browser loads 
  //this is inside init() because = body.onload &gt; init &gt; resize map
  map = new OpenLayers.Map('map_element', options);
  map.updateSize();
  
  //if browser resized
      window.onresize = function()
      {map.updateSize();}
  </code></pre>
  
  <p>but does not work</p>
  
  <p>Also, if I set <code>style=" width:100%;</code> in the <code>map_element</code> <code>div</code> the map disappears from the page.</p>
  
  <p>What is happening? What am I missing?</p>
  
  <p>Thanks in advance</p>