CODEWITHSUNDEEP
cssmediawikimediawiki-templates
CXL
CXL

Reputation: 1112

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

Here is my fiddle:

http://jsfiddle.net/XKs8H/1/

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.

Upvotes: 0

Views: 381

Answers (1)

Bergi
Bergi

Reputation: 664237

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.

Upvotes: 0

Related Questions