My CSS-driven tab control is functioning perfectly, with each page having a different height.
However, I am facing an issue where the next control appears beside the tab control when I need it to be positioned below it. This becomes especially challenging due to the varying heights of the tab content that I am selecting. Additionally, I would like to avoid fixing the page height and using scroll bars as a solution.
I would greatly appreciate any assistance in resolving this.
HTML:
<div>
<div class="tab-control">
<ul id="navlist" class="tabs">
<li>
<input type="radio" name="tabs" id="tab-1" checked="checked" />
<label for="tab-1">First Tab</label>
<div class="tab-content">
Content of Tab 1.
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-2" />
<label for="tab-2">Second Tab</label>
<div class="tab-content">
Line 1 - Tab 2.<br />
Line 2 - Tab 2.<br />
Line 3 - Tab 2.<br />
Line 4 - Tab 2.<br />
Line 5 - Tab 2.<br />
Line 6 - Tab 2.<br />
Line 7 - Tab 2.<br />
Line 8 - Tab 2.<br />
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-3" />
<label for="tab-3">Third Tab</label>
<div class="tab-content">
Content of Tab 3.
</div>
</li>
</ul>
</div>
<div>
This should appear beneath the tab control.
</div>
</div>
CSS:
.tab-control {
clear:both;
width:700px;
background-color:#0ff;
}
.tabs {
list-style-type:none;
padding:0;
margin:0;
position:relative;
width:100%;
}
.tabs li {
float: left;
}
.tabs li > input {
display: none;
}
.tabs li > label {
display: inline-block;
border: 1px solid #02606d;
padding: 10px 20px;
height:10px;
line-height:10px;
border-right-width:0px;
border-bottom-width:0px;
border-top-left-radius: 7px;
border-top-right-radius:7px;
cursor:pointer;
}
.tabs li:last-child > label {
border-right-width:1px;
}
.tabs .tab-content {
display: none;
position:absolute;
left:0;
padding:5px;
width:100%;
border: 1px solid #000;
}
.tabs li > input:checked + label {
background-color: #eee;
}
.tabs li > input:checked ~ .tab-content {
display: block;
}