HTML/CSS Tabstrip

Question

I'm looking to write / emulate a tab strip using HTML & CSS only.

I will progressively enhance this with JavaScript and do not need any help with that.

I've taken ideas from this page Example 6

Here is a live example

---

Please feel free to be pedantic about my current HTML and CSS markup. I'm looking to write this from scratch properly using HTML5 and CSS3 standards and am hoping to avoid my usual "If it works the quality of the markup doesn't matter. jQuery will come along and fix it for me!" attitude.

---

Here is my HTML currently have a markup of :

<div class="tabs">
    <section>
        <a> link 1 </a>
        <div> Content 1 </div>
    </section>
    <section>
        <a> link 2 </a>
        <div> Content 2 </div>
    </section>
</div>

---

Here is the (stripped) CSS :

.tabs {
    width: 100%;
}

.tabs > section > a {
    position: relative;
    display: block;
    float: left;
}

.tabs > section {
    display: inline;
}

.tabs > section:not(:target) > div {   
    position: absolute;
    padding: 20px;
    top: 50px;
    display: block;
    width: 100%;
}

---

There are 3 css issues that I am troubled with.

1. The div.tabs only has floated and absolute children so does not have any "real content" and there is no border around it. How do I get it to have a proper border?
2. the .tabs > section > div has a width of 100% but does not match the 100% width of the parent div.tabs due to the extra padding. My understanding of the box model is lacking here. How do I set it to have a width matching the div.tabs parent?
3. How do I make the content .tabs > section > div Sit just underneath the <a> of the tab strip without setting the css top value to a finicky "43px". What's the proper way to do generic positioning in these situations?

Disclaimer I don't care about proper browser support. Feel free to use HTML5 / CSS3. I'll use JavaScript to enhance the IE8 functionality properly.

---

If it helps this is the full CSS

.tabs {
    width: 100%;
    border: #000 solid 1px;
}

.tabs > section > a {
    position: relative;
    display: block;
    float: left;
    padding-left: 10px;
    margin-left: 5px;
    margin-right: 5px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid red;
}

.tabs > section {
    display: inline;
}

.tabs > section > div {
    z-index: -2;
    background: white;
    border: 1px solid blue;
}

.tabs > section:not(:target) > div {   
    position: absolute;
    padding: 20px;
    top: 50px;
    display: block;
    width: 100%;
}

Answer 1

I was able to get a working version of your tabs. Here is a jsFiddle version. (However, I wasn't able to solve all your dilemmas. Read below.)

CSS:

.tabs {
    position: relative;
    width: 100%;
    background: #fff;
    overflow: hidden;
    padding-bottom: 100px;
    border: 1px solid #000;
    }

.tabs > section > a {
    position: relative;
    display: block;
    float: left;
    border: 1px solid red;
    }

.tabs > section > div {
    position: absolute;
    top: 1.5em;
    left: -50000px;
    width: 100%;
    background: #fff;
    border: 1px solid blue;
    }

.tabs > section:target > div {
    left: 0;
    }

.tabs > section:not(:target)#one > div {
    left: 0;
    }

HTML:

<div class="tabs">
    <section id="one">
        <a href="#one">link 1</a>
        <div> Content 1 </div>
    </section>
    <section id="two">
        <a href="#two">link 2</a>
        <div> Content 2 </div>
    </section>
</div>

Addressing the three questions:

1. The tab div does collapse because of floating and absolutely-positioned objects. The only options I see are to set height or overflow:hidden with bottom padding.
2. I was able to get the width set to that of div.tabs in my CSS above. That's probably a function of position: relative.
3. Again since all the objects are taken out of flow, I don't see a way without JavaScript to make the section > divs aware of the anchor height.

PS. I liked the use of :target and was able to get your content block to switch as well as have a default.

Answer 2

All of your questions can be answered if you separate the tabs and content into two different containers like the example you posted did. Just clear the floats after the tabs.

<div class="tabbed-area">

    <ul class="tabs group">
        <li><a href="#box-one">Tab 1</a></li>
        <li><a href="#box-two">Tab 2</a></li>
        <li><a href="#box-three">Tab 3</a></li>
    </ul>

    <div class="box-wrap">

        <div id="box-one">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            </ul>
        </div>

        <div id="box-two">
            <p>Feugiat...</p>
        </div>

        <div id="box-three">
            <p>Pellen...</p>
        </div>

    </div>

</div>