Question

I’m having a little problem with my CSS tabs. The thing is, the content area does not grow according to the content inside it. Here’s the css code:

.tabs {
  position: relative;   
  min-height: 400px; 
  clear: both;
  margin: 25px 0;
}



.tab1 {
  float: left;
}
.tab2 {
  float: left;
}
.tab3 {
  float: left;
}


.tab1 label {
  background: white; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-right:2px;
  position: relative;
  left: 1px; 
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  -moz-border-radius-topright: 15px;
  -moz-border-radius-topleft: 15px;

}

.tab2 label {
  background: white; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-right:2px;
  position: relative;
  left: 1px; 
   border-top-right-radius: 15px;
   border-top-left-radius: 15px;
  -moz-border-radius-topright: 15px;
  -moz-border-radius-topleft: 15px;
}

.tab3 label {
  background: white; 
  padding: 10px; 
  border: 1px solid #ccc;  
  margin-right:2px;
  position: relative;
  left: 1px; 
   border-top-right-radius: 15px;
   border-top-left-radius: 15px;
  -moz-border-radius-topright: 15px;
  -moz-border-radius-topleft: 15px;
}




.tab1 [type=radio] {
  display: none;  
}
.tab2 [type=radio] {
  display: none;   
}
.tab3 [type=radio] {
  display: none;   
}



  .content1 {
  position: absolute;
  top: 28px;
  left: 0;
  background: #936;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}

  .content2 {
  position: absolute;
  top: 28px;
  left: 0;
  background: #09C;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}

  .content3 {
  position: absolute;
  top: 28px;
  left: 0;
  background: #990;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}



   .tab1 [type=radio] ~ label:hover
{
background: #936;
text-shadow:1px 1px 1px #000;
}
   .tab2 [type=radio] ~ label:hover
{
background: #09C;
text-shadow:1px 1px 1px #000;
}
   .tab3 [type=radio] ~ label:hover
{
background: #990;
text-shadow:1px 1px 1px #000;
}




.tab1 [type=radio]:checked ~ label
{
    background: #936;
  border-bottom: 1px solid white;
  z-index: 2;
}

.tab2 [type=radio]:checked ~ label
{
    background: #09C;
  border-bottom: 1px solid white;
  z-index: 2;
}

.tab3 [type=radio]:checked ~ label
{
    background: #990;
  border-bottom: 1px solid white;
  z-index: 2;
}





[type=radio]:checked ~ label ~ .content1 {
  z-index: 1;

}
 [type=radio]:checked ~ label ~ .content2 {
  z-index: 1;

}
 [type=radio]:checked ~ label ~ .content3 {
  z-index: 1;

}

(sorry it’s too long) and then the HTML one:

<div id="page-wrap">
<div class="tabs">
  <div class="tab1">
    <input type="radio" id="tab-1" name="tab-group-1" checked="checked" />
    <label for="tab-1">One</label>

    <div class="content1">
      <p>Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here.</p>
    </div>
  </div>

  <div class="tab2">
    <input type="radio" id="tab-2" name="tab-group-1" /> <label for="tab-2">Two</label>

    <div class="content2">
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here.<br />
    </div>
  </div>

  <div class="tab3">
    <input type="radio" id="tab-3" name="tab-group-1" /> <label for="tab-3">Three</label>

    <div class="content3">
      <p>Stuff for Tab Three</p>
    </div>
  </div>
</div>

I tried overflow: both; inside .content but that gave me scrollbars, I want the content area itself to grow. I even tried to call .clear {clear: both;} but that didn’t seem to work well too.

I appreciate any help.

Thanks 🙂

Answer 1

  .content1 {
    position:absolute;
  top: 28px;
  left: 0;
  background: #936;
  padding: 20px;
  border: 1px solid #ccc; 
    clear:both;
}

  .content2 {
   position:absolute;
  top: 28px;
  left: 0;
  background: #09C;
  padding: 20px;
  border: 1px solid #ccc; 
    clear:both;
}
  .content3 {
  position:absolute;
  top: 28px;
  left: 0;
  background: #990;
  padding: 20px;
  border: 1px solid #ccc; 
    clear:both;
}

http://jsfiddle.net/UDDkU/1/

It still needs some work to show and hide the correct tabs but your overflow problem is fixed. If you want all the tabs to have the same width you will need to add one.

UPDATE

Here is an updated version with condensed css and completed tabs.

http://jsfiddle.net/UDDkU/20/