title: CSS parent div border and height collapsing
body: <p>Have a parent div and 3 child div's.  Know the height of child2 only.  Want the child1 and child3 to have the same height as height getting reduced. Also border of the parent is collapsing.  Want the border of parent to be visible around the child.
  Pasted the code <a href="http://jsfiddle.net/586Cr/" rel="nofollow">http://jsfiddle.net/586Cr/</a>  </p>
  
  <p>Provided the code below.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        #parentt{
          background-color:#000000;
          border:4px solid #0000FF;
        }
        #child1{
          background-color:#000000;
          border:4px solid #FF0000;
          float:left;
          width:25%;
        }
        #child2{
          background-color:#000000;
          border:4px solid #FF0000;
          float:left;
          width:30%;
          height:100px;
        }
        #child3{
          background-color:#000000;
          border:4px solid #FF0000;
          width:25%;
          float:left;
        }
        .trans60 {
           zoom: 1;
           filter: alpha(opacity=60);
           opacity: 0.6;
        }
        .trans100 {
           zoom: 1;
           filter: alpha(opacity=100);
           opacity: 1.0;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="parentt"&gt;
        &lt;div id="child1" class="trans60"&gt; child1&lt;/div&gt;
        &lt;div id="child2" class="trans100"&gt;child2&lt;/div&gt;
        &lt;div id="child3" class="trans60"&gt;child3&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>