title: CSS3 - Div width=100% pushes content to new line instead of using remaining space
body: <p>I have looked around for a solution to this problem, but I haven't found anything that works.  This is a bit noobish so I apologize but I am a bit rusty in my CSS.</p>
  
  <p>All I would like to do is to have 2 div elements aligned side by side horizontally that will take up 100% of the window's height and width.  The div on the left will have a fixed width value and the div on the right will take up the remaining space.</p>
  
  <p>The solution is probably really simple and I am sure I am missing a basic concept to CSS which is causing this issue so if you could help me out and maybe point me to some literature to help me understand what I am doing wrong I would really appreciate it.</p>
  
  <p><a href="http://jsfiddle.net/se3ja/" rel="nofollow">Fiddle Link to the code</a></p>
  
  <p>The html code:</p>
  
  <pre><code>&lt;div id="leftSideBar"&gt;Left Sidebar&lt;/div&gt;
  &lt;div id="content"&gt;Content&lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>html, body{
      height: 100%;
      width: 100%;
  }
  #leftSideBar{
      width:175px;
      height:100%;
      background-color:#567880;
  }
  #content{
      width:100%;
      height:100%;
      background-color:#00a0a0;
  }
  </code></pre>