title: HTML layout problems
body: <p>I have a problem with dividing a multicolumn layout in HTML. I have divided the page into two columns:</p>
  <h3><code>inner1</code></h3>
  <ul>
  <li>Two rows.</li>
  <li>another_top1:fixed width,fixed hight</li>
  <li>response:fixed width,variable hight</li>
  </ul>
  <h3><code>inner2</code></h3>
  <ul>
  <li>Two rows.</li>
  <li>another_top2:fixed width,variable hight</li>
  <li>another_below:fixed width,fixed hight</li>
  </ul>
  <h3>The problem:</h3>
  <p>When I try to divide <code>inner1</code> into two columns as in the following it works fine.</p>
  <ol>
  <li>inner1</li>
  <li>inner1_2</li>
  </ol>
  <hr />
  <p>My <code>inner2</code> column <code>another_top2</code> data, appended below floating below <code>inner1_2</code> ends.</p>
  <hr />
  <h3>CSS:</h3>
  <pre><code>#another_top1{
      width: 500px;
      height: 200px;
  }
  
  #another_top2 {
      float: right;
      display: inline;
      width: 350px;
      padding: 0 0 10px 10px;
      margin-bottom: 10px;
      color: #fff;
  }
  
  #outer{
      background-color: #FFFF99;
  }
  
  #inner1{
      float: left;
  }
  
  #inner1_2 {
      float: left;
      margin-top: 200px;
  }
  .twoColumn #inner1 { width: 62%; }
  .twoColumn #inner1_2 { display: none; }
  .threeColumn #inner1 { width: 41%; }
  .threeColumn #inner1_2 { width: 21%; }
  
  #inner2{
      float: right;
      width: 39%;
  }
  </code></pre>
  <p>How can I fix this?</p>