CSS and MediaWiki - auto-expanding a DIV correctly with absolute and relative DIVs

Question

Here is my fiddle:

And here's my problem:

I'm creating a wiki using MediaWiki. I'm trying to avoid using a lot of extensions and third-party stuff in my installation.

What I'm using is a MediaWiki Template to generate the content shown in my example. Because it's a template, it renders once for every time it's called. So, for each character in the example, the template first creates a left-floating DIV for the name tab and a DIV below that for the content of the character's bio. I can make that part work with absolute positioning, but then the rest of the wiki page content shows up below the absolute div.

Example:

<div id="tab1">Tab 1</div>
<div id="bio1">Tab 1's bio</div>
<div id="tab2">Tab 2</div>
<div id="bio2">Tab 2's bio</div>
<div id="pagebody">Rest of the page's content</div>

Each tab should float next to each other. The bio should show up below the row of tab divs, and pagebody should show up below everything.

You want tab2 to show right and above of bio1? Seems impossible. — Bergi, Nov 20 '12 at 23:42
Yeah, I thought it was but wanted to make sure. I gave up. :P — CXL, Nov 21 '12 at 17:02

score 0 · Answer 1 · answered Nov 21 '12 at 17:56

I'd recommend something like this:

<div class="tab">
    <div class="tab-name">Tab 1</div>
    <div class="bio">Tab 1's bio</div>
</div>
<div class="tab">
    <div class="tab-name">Tab 2</div>
    <div class="bio">Tab 2's bio</div>
</div>
<div class="clearfix">Rest of the page's content</div>

Where the tabs themselves are floating, and clearfix is the common float-clearing page body.

CSS and MediaWiki - auto-expanding a DIV correctly with absolute and relative DIVs

1 Answers1