title: My div is breaking out of its container div
body: <p>I have a containing div that is NOT restricting the width of its child divs. The divs are stretching all the way to the full width of the screen, when i have a set width on both the container and the child.  Why is this happening. I do NOT have any positioning or floating going on.</p>
  
  <p>Please view my HTML:</p>
  
  <pre><code>&lt;ul class="tabs_commentArea"&gt;
      &lt;li class=""&gt;&lt;a href="#" class=""&gt;Starstream&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="#" class=""&gt;Comments&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="paneWrap"&gt;
  &lt;div class="panes_comments"&gt;
      &lt;div class="comments"&gt;member pane 1&lt;/div&gt;
      &lt;div class="comments"&gt;member pane 2&lt;/div&gt;
      &lt;div class="comments"&gt;member pane 3&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>My CSS, the relevant parts of it at least:</p>
  
  <pre><code>#MembersColumnContainer {
      width: 590px;
      float: left;
      padding-right: 0px;
      clear: none;
      padding-bottom: 20px;
      padding-left: 2px;
  }
  
  ul.tabs_commentArea { 
      list-style:none; 
      margin-top: 2px !important; 
      padding:0;  
      border-bottom:0px solid #666;   
      height:30px;
  }
  
  ul.tabs_commentArea li {
      text-indent:0;
      margin:  !important;
      list-style-image:none !important;
      padding-top: 0;
      padding-right: 0;
      padding-bottom: 0;
      padding-left: 0;
      float: right;
  }
  
  #paneWrap {
      border: solid 3px #000000;
  
  }
  
  .panes_comments div {
      display: ;
      padding: px px;
      /*border:medium solid #000000;*/
      height:150px;
      width: 588px;
      background-color: #FFFF99;
  }
  </code></pre>