title: CSS tabs expand height to content
body: <p>The current problem I am facing is I'm looking to place a tabbed content box on an eBay listing. Currently a jQuery solution will not work as eBay strips it from the code</p>
  
  <p>I have turned to a pure css approach but have run into problems changing the height of the tabs to resize based on the content.(which is generated and inserted by eBay) </p>
  
  <p>here is my css </p>
  
  <pre><code>.tabs {
    position: relative;   
    min-height: 100px;
    clear: both;
    margin: 25px 0;
  }
  .tab {
    float: left;
  }
  .tab label {
    background: #eee; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative;
    left: 1px; 
  }
  .tab [type=radio] {
    display: none;   
  }
  .content {
    position: absolute;
    top: 28px;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 20px;
    border: 1px solid #ccc; 
  }
  [type=radio]:checked ~ label {
    background: white;
    border-bottom: 1px solid white;
    z-index: 2;
  }
  [type=radio]:checked ~ label ~ .content {
    z-index: 1;
  }
  </code></pre>
  
  <p>in action <a href="http://jsfiddle.net/nYcR3/" rel="nofollow">jsfiddle of my code</a></p>
  
  <p>any help would be appreciated. </p>