vertical tabs same height as content

Question

Practically I have a vertical tabs menu and what I am trying to achieve is to have the menu wrapper height dynamically set depending on the content or the tabs height (the one that is bigger wins)

Here is a jsfiddle of what I have made so far : http://jsfiddle.net/f9zt9xqr/2/

HTML:

<div id="page-wrap">
      <div class="tabs">
        <div class="tab">
          <input type="radio" id="tab-1" name="tab-group-1" checked>
          <label for="tab-1">Tab One</label>
          <div class="content">
            <p>Stuff for Tab One</p>
          </div>
        </div>
        <div class="tab">
          <input type="radio" id="tab-2" name="tab-group-1">
          <label for="tab-2">Tab Two</label>
          <div class="content">
            <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
            <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p>
          </div>
        </div>
        <div class="tab">
          <input type="radio" id="tab-3" name="tab-group-1">
          <label for="tab-3">Tab Three</label>
          <div class="content">
            <p>Stuff for Tab Three</p>
          </div>
        </div>
      </div>
    </div>

CSS:

* {
    gmargin: 0;
    spadding: 0;
}
body {
    background: #f9f9fc;
}
#tab-1{
  position: absolute;
  top: -200px;
  left: -200px;
}
#tab-3{
  position: absolute;
  top: -200px;
  left: -200px;
}
#tab-2{
  position: absolute;
  top: -200px;
  left: -200px;
}

#page-wrap{
  position: relative;
  background:#123456;
}
.tabs {
    position: relative;
    hmin-height: 200px;
    /* This part sucks */
    clear: both;
    smargin: 25px 0;
}
.tab {
    rfloat: left;
    sposition:absolute; 
   height: auto;
}
.tab label {
    background: #f5f5f9;
    padding: 10px;
    border: 1px solid #ccc;
    margin-left: -1px;
    dposition: relative;
    left: 1px;
    width: 70px;
    display: block;
}
.tab[type=radio] {
    display: none;
}

.content {
    display:none;
    position: absolute;
    top: 0px;
    left: 92px;
    background: white;
    right: 0;
    zbottom: 0;
    padding: 20px;
    border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
    background: white;
    sborder-bottom: 1px solid white;
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    8overflow:auto;
    display:inline;
    z-index: 1;
}

on the second option you can clearly notice that the page-wrap doesn't extend to the content size

I was thinking that this is because content is an inner element of tab and therefore should be modified there but it didn't work either.

Any suggestions how to achieve that and maybe don't mind explaining what I was doing wrong ?

Answer 1

I updated the css to take out some of the absolute positioning and made the content have a min-height of 100%, this also required taking out the vertical padding of the content area.

http://jsfiddle.net/f9zt9xqr/4/

.content {
    display:none;
    position: absolute;
    top: 0;
    left: 92px;
    background: white;
    right: 0;
    padding: 0 20px;
    border: 1px solid #ccc;
    min-height: 100%;
}

Answer 2

.tabs { display:table; }
label {display:table-cell;}
.content {display-table:cell;}

remove position absolute as it won't help you in this situation. See how it goes

PS: remove the display:inline from [type="radio"]:checked ~ label ~ .content