Today pages are built using the follow structure: 

<div id="header">
  <div class="logo"> <a href= StartPage > <img src=$WikiLogo> </div>
  <h1>PageTitle</h1>
  <div class="toolbar_top"> StartPage | RecentChanges | ... | Preferences </div>
  <hr>
</div>
<div id="body"> 
  Text of page
</div>
<div id="footer">
  <hr />
  <div id="toolbar_bottom">Edit | History ... </div>
  <form action=find>
    <div class="form">
       Search : <input name="find" />
    </div>
</div>

This structure has it advantages, and disadvantages. One might do a lot of changes using this structure, but something are impossible, like changing to a two-column output-mode by only changing the css file used. And those of you creating other templates, are bound to have discovered other shortcomings of the original structure. Here comes three new structures which i would like your opinions and comments on:

But before going into these alternatives, I would like to introduce the other page containing new ideas on the elements used on this page, see TaviTodo/NewPageElements.

Alt I: Original design, with minor tweaks

Reasoning here is simply to restructure the original design, into a somewhat cleaner desing. No big changes. Only some changing of id's to class'es, and renaming of some elements.

<div id="tavi_header">
  <div class="logo"> <a href= StartPage > <img src=$WikiLogo> </div>
  <h1>PageTitle</h1>
  <div class="toolbar_top"> StartPage | RecentChanges | ... | Preferences </div>
  <hr>
</div>
<div id="tavi_body"> 
  Text of page
</div>
<div id="tavi_footer">
  <hr />
  <div id="toolbar_bottom">Edit | History ... </div>
  <form class="search">
    <div class="form">
       Search : <input name="find" />
    </div>
  </form>
</div>

Alt II: Original design, added PageTitle

Similar to Alt I, with the addition of <h1>PageTitle</h1> to the tavi_body-element. This allows for shifting the whole of tavi_header to the left (or right) to make a two-column layout. Due to the duplication of the PageTitle one could easily use display: none on one of them, according to which div one actually wants to use for display the title. 

<div id="tavi_header">
  <div class="logo"> <a href= StartPage > <img src=$WikiLogo> </div>
  <h1>PageTitle</h1>
  <div class="toolbar_top"> StartPage | RecentChanges | ... | Preferences </div>
  <hr>
</div>
<div id="tavi_body"> 
  <h1>PageTitle</h1>
  Text of page
</div>
<div id="tavi_footer">
  <hr />
  <div id="toolbar_bottom">Edit | History ... </div>
  <form class="search">
    <div class="form">
       Search : <input name="find" />
    </div>
  </form>
</div>

Alt III: New version, lots of floating div's

Actually this is is quite similar to Alt II (and I), it's just that the outer div's tavi_header and tavi_bottom has been removed, and as a consequence some additional classes added. Since the whole page now contains a total of 8 block elements, not subdivided, one are allowed a lot of freedom as to placing the blocks wherever one wants to. It's not a problem to make two/three columns layout, or not showing given elements or whatever.

<div class="tavi_logo"> <a href= StartPage > <img src=$WikiLogo> </div>
<h1 class="tavi_title>PageTitle</h1>
<div class="toolbar_top"> StartPage | RecentChanges | ... | Preferences </div>
<hr class="line_top">
<div id="tavi_body"> 
  Text of page
</div>
<hr class="line_bottom" />
<div id="toolbar_bottom">Edit | History ... </div>
<form class="search" action=find>
  <div class="form">
     Search : <input name="find" />
  </div>
</form>

Discuss which you want for 'Tavi

EvenHolen: My main goal is to have a structure allowing for a simple two-column layout simply by changing which css-file used. Along with a php-based style switcher as part of the preferences sections this would allow each user to choose from a predefined set of styles. This way the user might choose whether he wants a two-column with menu on the left, two-column with menues below, one-column like today, or another user provided style sheet. This goal could be accomplished using Alt II or Alt III. Alt II is maybe cleaner in structure, but lacks some of the flexibility of Alt III. Do also see TaviTodo/NewCssStructureExamples.

What do you think...

As for Alt I: It is better no to change the layout of the HTML/CSS if use Alt I as the change is minor.

WHat as I know is HTML is a structural language, and so it is hard to decide which one shall we to use between Alt II and Alt III: HTML is structural meaning that all the block level elements represent the structure of the webpage like a tree ( <HTML></HTML> is the root of the tree). Therefore, in Alt III, no structure is represented in the webpage. However, Alt II has a problem in its structure also. ALthough there is a structure of the webpage in Alt II, there are two title in Alt II. Maybe someone claims that we can use display: none to make one of them unseen, but how about showing the page in a browser which can not showing CSS?

Therefore, I donno which one is better between Alt II and III. ---AaronLaw

WyboWiersma: Especially the third version looks neat, and flexible to me. As soon as I have time again, I will implement a structure simmilar like it in LogiLogi. Thanks very mucht for these proposed css-layouts!

MaartenBrouwers: Well, just found this page EvenHolen was referring to on the TaviMailingList in answer to a submit of a template I created which would make HTML editing in any of the above forms much easier (see TemplateExchange). But when you're about to change the standard HTML to be more flexible for CSS designs, one might consider leaving out terms like 'top, bottom' etc., as these should be free to move, anywhere on the page.

At least we need a common vocabulary to talk about page elements. So I find calling the things 'top' and 'bottom' as they appear in the default style ok. --HermannSchwarting

I have done extensive changes to Tavi to achieve the style of [this wiki]. I have a layout like Alt II because it keeps the structure and makes it easy to apply a style for e.g. "all the top bar". With CSS you're free to position the elements differently later anyway. --HermannSchwarting