title: 2 Divs side by side, HTML/CSS
body: <p>I've been trying to set 2 divs side by side without using a html table. 
  I have tried CSS display:inline, float, margins and padding combinations but still couldn't get the desired effect.</p>
  
  <p>The code is 2screens one Canvas and one SVG with the controls for each one bellow.</p>
  
  <p>The image is the closest I could get :3</p>
  
  <p><a href="http://i.stack.imgur.com/zRhN3.png" rel="nofollow">Notice that the Canvas-controls are in the correct place but the SVG-controls not in the right place and should be in the same line as the canvas-controls.</a></p>
  
  <pre><code>&lt;style&gt;
          .etiq1{font-family:verdana; font-size:15px;}
          #screen, #vect{border: 1px solid #000000;background-color:#0000FF;}
          #pR, #pG,{font-family:arial; font-size:15px; text-align:right;}
          #cR, #cG,{width:100px;}
          #ctrlsSVG{margin-left:505px;}           
      &lt;/style&gt;
      &lt;script&gt;
          var screen,paint,vect,pR,pG;
          function inicGraf(){
              screen = document.getElementById("screen");
              vect = document.getElementById("vect");
              paint = screen.getContext("2d");
              pR=document.getElementById("pR"); 
              pG=document.getElementById("pG"); 
          }
          &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;canvas id="screen" width="500" height="500"&gt;&lt;/canvas&gt;
      &lt;svg id="vect" width="500" height="500"&gt;&lt;/svg&gt;
      &lt;div id="ctrlsCanvas"&gt;
          &lt;span class="etiq1"&gt;CANVAS: click to alternate pattern.&lt;/span&gt;
          &lt;br /&gt;
          &lt;span class="etiq1"&gt;Modulation (1-30):&lt;/span&gt;
          &lt;input id="pR" size="1" value="4" min="1" max="30" /&gt;
          &lt;input id="cR" type="range" value="4" min="1" max="30" step="1"/&gt;&lt;span class="etiq1"&gt;(auto-renew)&lt;/span&gt;
      &lt;div/&gt;      
      &lt;div id="ctrlsSVG"&gt;
          &lt;span class="etiq1"&gt;SVG: click to alternate pattern.&lt;/span&gt;
      &lt;br /&gt;
          &lt;span class="etiq1"&gt;Modulation (1-10):&lt;/span&gt;
          &lt;input id="pG" size="1" value="4" min="1" max="10" /&gt;
          &lt;input id="cG" type="range" value="4" min="1" max="10" step="1" /&gt;
          &lt;button&gt;&lt;span class="etiq1"&gt;renew&lt;/span&gt;&lt;/button&gt; 
      &lt;div/&gt;
      &lt;script&gt;
          inicGraf();
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>