Question

How can I make the parent DIV wrap around the child DIVs? The problem lies with position:absolute in .nav-content.

http://jsfiddle.net/9H77Y/8/

EDIT: Well, apparently what I want is impossible. The only way to work around this would be javascript which would defeat the purpose of this in the first place. However, setting a fixed height to nav-tabs will work.

HTML

<div class="nav-tabs-wrapper">
  <div class="nav-tabs">
    <div class="nav-tab">
      <input type="radio" id="tab1" name="nav-group" checked>
      <label for="tab1">foooooooo</label>
      <div class="nav-content">
        <div> stuff1 </div>
      </div>
    </div>
    <div class="nav-tab">
      <input type="radio" id="tab2" name="nav-group">
      <label for="tab2">bar</label>
      <div class="nav-content">
        <div> stuff2 </div>
      </div>
    </div>
  </div>
</div>

CSS

.nav-tabs-wrapper
{
    padding: 10px; /* separates the code from other content */
    border: 1px solid #F00; /* visibility aid */
}
.nav-tabs
{
    position: relative; /* needed as future positioning reference base */
            clear: both;
            height: 200px; /* Unfortunate */
    padding-left: 10px; /* provides the paragraph-tab effect to the tabs */
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
}
.nav-tab
{
    float: left; /* keeps the tabs inline with no gap [inline-block introduces gaps] */
}
.nav-tab label
{
    display: block; /* needed so tabs can be positioned correctly to hide nav-content border */
    position: relative; /* needed to position tabs correctly */
    top: 1px; /* lowers the tabs to cover the border of nav-content; needed so bottom corners aren't slanted, but a 90deg angle */
    padding: 4px;
    border: 1px solid #999;
    border-bottom-width: 0px; /* removes bottom border; needed so bottom corners aren't slanted, but a 90deg angle */
    background-color: #CCC;
}
.nav-tab [type=radio]
{
    display: none; /* hide the radio selectors */
}
.nav-tab [type=radio]:checked ~ label
{
    z-index: 2; /* makes sure that the active tab is drawn above nav-content to cover border */
    background-color: #FFF; /* covers the nav-content border */
}
.nav-tab [type=radio]:checked ~ .nav-content
{
    visibility: visible !important; /* unhides the nav-content div for the current tab */
}
.nav-tab:nth-child(n+2)
{
    margin-left: -1px; /* positions the left border of every second+ tab over the previous tab's right border */
}
.nav-content
{
    visibility: hidden; /* hides the content by default */
    position: absolute; /* positions the content for all tabs to the absolute left relative to the tabs */
    left: 0; /* undo's the padding from the paragraph-tab effect */
    width: 100%; /* fills the nav-content DIV completely for a better looking border */
    z-index: 1; /* makes sure that the border is drawn under the tabs */
    border: 1px solid #999;
}
.nav-content div
{
    padding: 10px; /* separate div needed to keep nav-content from overflowing due to padding */
}

Answer 1

You can’t account for position:absolute elements.

They are completely removed from the flow of the document.

Quoting the Specs

absolute
The box’s position (and possibly size) is specified with the ‘top‘, ‘right‘, ‘bottom‘, and ‘left‘ properties. These properties specify offsets with respect to the box’s containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.