title: CSS/HTML floating div inheriting parent's width and not responding to defined width, what's wrong?
body: <p>I'm new here and to HTML/CSS, so forgive me if I'm being incredibly dopey with this issue. I have searched for an answer to no avail and I finally admit defeat and ask...</p>
  
  <p>I have two div boxes side by side in a container using float. No problmes there (i hope). I wish to split the right hand div box again. I thought it wouldn't be an issue, turns out I was wrong. I just cannot get the Include list (.includebox) to sit next to it's partner the Exclude list (.excludebox) inside .helpbox2</p>
  
  <p>I've cut and pasted what I think is the pertinent code but I can always add more. The problem is live at www.exceptionalcvs.co.uk/help_cv_basics.html unless i've mucked around with it again - which I shall try my hardest to refrain from.  </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="margins"&gt;
        &lt;div class="helpbox1"&gt;
          &lt;h2&gt;1. Introduction&lt;/h2&gt;
          &lt;/p&gt;&lt;p&gt;
          &lt;p&gt;text here&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="helpbox2"&gt;
          &lt;h2&gt;2. What do I put in my CV&amp;#63;&lt;/h2&gt;
          &lt;p&gt;&lt;/p&gt;
          &lt;div class="includebox"&gt;Include list
            &lt;ul&gt;
              &lt;li&gt;&lt;/li&gt;
              &lt;li&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="excludebox"&gt;Exclude list
            &lt;ul&gt;
              &lt;li&gt;Passport number&lt;/li&gt;
              &lt;li&gt;Driving license number&lt;/li&gt;
              &lt;li&gt;Social Security number&lt;/li&gt;
              &lt;li&gt;&lt;/li&gt;
              &lt;li&gt;Martial status&lt;/li&gt;
              &lt;li&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container{width:960px;margin:0 auto}
  .margins{margin-left:16px;margin-right:16px}
  .helpbox2{position:relative;top:0;left:0;width:396px;float:right;padding-right:12px;padding-left:12px;padding-bottom:10px;border-bottom:1px solid #999;border-left:2px solid #999;border-top:2px solid #999;border-right:1px solid #999;background:#efe7ca;margin-left:5px}
  
  .incudebox{position:relative;left:0px;right:0px;width:100px;float:left;margin:0px auto;}
  .excludebox{position:relative;left:0px;right:0px;vertical-align:top;width:100px;float:right;margin:0px}
  </code></pre>
  
  <p>Apologies if the code is a bit messy. 
  image of issue is here:
  <a href="http://www.exceptionalcvs.co.uk/img/div_problem.jpg" rel="nofollow">http://www.exceptionalcvs.co.uk/img/div_problem.jpg</a></p>