title: DIVs in a parent div overlapping when resized
body: <p>I'm not really a champ when it comes to CSS, so I was hoping I could get some assistance. </p>
  
  <p>Right now I got one parent div with two child divs. Currently, whenever I resize the browser, the two divs overlap each other. I want the left div to be visible at all times.</p>
  
  <p>It can be viewed in action over here: <a href="http://unlimitedbrettworks.com/forums/" rel="nofollow">http://unlimitedbrettworks.com/forums/</a></p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#header {
       position: relative;
       height: 140px;
       overflow: hidden;
       background-color: #E1E1E1; }
  #logo a {
      overflow: hidden;
      float: right;
      width: 620px !important;
      height: 190px !important;
      cursor: pointer;
      background: url(../images/art/logo.png) no-repeat;
  }
  #userarea {
      float: left;
      margin: 0 1em; 
      padding: 1.5em 1em 0 1em;
      text-align: left;
      font-size: 0.95em;
      width: 38em;
      color: #313131;
      font-family: tahoma, sans-serif;
      line-height: 130%;
  }
  #userarea a:link, #userarea a:visited {
      color: #333333;
  }
  #userarea a:hover {
      color: #800000;
      text-decoration: underline;
  }
  </code></pre>