IncaYebail-The6thprofit
New Member
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:\[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;}\[/code\](sorry it's too long) and then the HTML one:\[code\]<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>\[/code\]I tried \[code\]overflow: both;\[/code\] inside \[code\].content\[/code\] but that gave me scrollbars, I want the content area itself to grow. I even tried to call \[code\].clear {clear: both;}\[/code\] but that didn't seem to work well too.I appreciate any help.Thanks 