title: Aligning a Child Div in a parent div
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/804926/make-outer-div-be-automaticly-the-same-height-as-its-floating-content">Make outer div be automaticly the same height as its floating content</a>  </p>
  </blockquote>
  
  
  
  <p>I feel like I'm missing something very simple here...</p>
  
  <p>We have a simple setup: a parent div that contains a child div.
  I want to:</p>
  
  <ul>
  <li>make the parent resize its height based on the child</li>
  <li>align the child to the right edge of the parent instead of the default left.</li>
  </ul>
  
  <p>Using <code>float:right</code> will cause the parent to no longer resize correctly and the child to 'jump out' of the parent.</p>
  
  <p>I've tried using <code>align: right</code> and <code>text-align: right</code> but so far no dice.</p>
  
  <h1>HTML:</h1>
  
  <pre><code>    &lt;div id="parent"&gt; &lt;p&gt;parent&lt;/p&gt;
          &lt;div class="child"&gt; &lt;p&gt;child&lt;/p&gt; &lt;/div&gt;
  
          &lt;div class="child right"&gt; &lt;p&gt;child2&lt;/p&gt; &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <h1>CSS:</h1>
  
  <pre><code>    div{ padding: 15px; margin: 5px; }
      p{ padding: 0; margin: 0; }
  
      #parent{
          background-color: orange;
          width: 500px;
      }
  
      .child{
          background-color: grey;
          height: 200px;
          width: 100px;
      }
  
      .right{ float: right; } // note: as the commenters suggested I should also be using a float:left on the other child.
  </code></pre>
  
  <h2><a href="https://i.imgur.com/jfWw0.png" rel="nofollow noreferrer">Result</a>:</h2>
  
  <p><img src="https://i.imgur.com/jfWw0m.png" alt="result" title="result"> </p>
  
  <h2><a href="https://i.imgur.com/cz7mv.png" rel="nofollow noreferrer">What I want</a>:</h2>
  
  <p><img src="https://i.imgur.com/cz7mvm.png" alt="what I want" title="what I want"></p>
  
  <p>Any suggestions on what I could change either with <code>#parent</code> or <code>.right</code> to make <code>child2</code> align to the right properly?</p>
  
  <h1>EDIT</h1>
  
  <p>The best fix I found for this is just using <code>display:table</code> on the parent. Though I haven't tested this in IE it fixes the issue in the browsers I care for and avoids using the un-intuitive <code>overflow:hidden</code> method discussed in the comments.</p>
  
  <p>Even better: set margin-left of the child to auto.</p>