Discussion:THE BIRTH OF "LAYOUT BESIDE" - Call for Opinions

This Q is meant for a discussion, please Join in even if many experts already commented,
and even if it has been already closed.

Branching from http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21693043.html
which you can read for background but don't really have to.

While trying to figure out how to use CSS to layout my site ( http://JSBugHunter.com)
and almost giving it all up and going back to tables:

I Just came up with the following idea:
I have not seen this implemented or mentioned anywhere and I (Eyal Peleg a.k.a. SnowFlake on EE) "claim" it as my own,
I will name this "Layout Beside" after .Net's Code Behind (unless a better suggestion comes out)

Thinking again on how any why this whole "USE CSS FOR LAYOUT" issue came to live
I think it is based on the need to separate the information concerning the layout from the actual content,
for the same reasons we separate code from the markup (like in .Net's Code Behind).


What I did was to do just that, place the layout Beside the content and not around it.

my markup looks like this:

<div id="logo">Logo</div>
<div id="welcome">welcome Text welcome Text welcome<br/>Text welcome Text welcome Text welcome Text welcome Text welcome Text welcome Text </div>
<div id="topmenu">TopMenu TopMenu TopMenu TopMenu TopMenu TopMenu</div>
<div id="sidemenu">sideMenu<br/>sideMenu<br/>sideMenu<br/>sideMenu<br/>sideMenu</div>
<div id="content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div>
<div id="footer">Footer Footer Footer Footer Footer Footer</div>

<table id="layout">
<tr><td id="_logo"></td><td id="_welcome" valign="top"></td></tr>
<tr><td id="_topmenu" colspan="2"></td></tr>
<tr><td id="_sidemenu"></td><td id="_content" valign="top"></td></tr>
<tr><td id="_footer" colspan="2"></td></tr>
</table>

and then I added a small amount of JavaScript to pull the content nodes from the DOM tree and re-insert them into the respective nodes in the layout.
I know this script needs to be modified for better browser compatibility But I hope this won't prove to cause any problems,
Even as it it works on both my IE6.0 and FF1.5 - but I will try make it more robust.

<script>
function GetObj(id){       return document.getElementById(id); }
function MoveInto(c,e){ c.appendChild(e.parentNode.removeChild(e)) }

var elids=['logo','welcome','topmenu','sidemenu','content','footer'];
for(var i=0;i<elids.length;i++){
      var el,cel;
      el=GetObj(elids[i]);
      cel=GetObj('_' + elids[i]);
      if (el && cel) {
            MoveInto(cel,el);
      }
}
</script>

IMHO this gives me mostly benefits.
1) good old table based layouts.
2) none of the bad old layout spaghetti (and I have nothing against spaghetti as long as its on my plate and not my code)
3) layout is visible - can anyone really look as some style sheet and say "Yep, I see this Its obviously a three column layout with a header and a footer" ? Looking at the "Layout Beside" it is SO easy to see.
4) The "layout beside" HTML can be inserted into the page on the server side, based on a parameter or be implemented as a user control or what ever other server side technology.
This means you have central management of you layouts, and can easily change a layout or choose a different layout for a specific page.

The only "major" disadvantage of this method is that it requires JavaScript,
I have two things to say about it:
1) I can leave with it.
2) This can be "standardized" by adding special tags for this in some future HTML versions.
    I would suggest use <container id="containerID" /> and <content UseContainer="containerID">blha</content>)
    This should cause the content to render as a child of the appropriate container.
    maybe even just settle for a Container attribute on any other HTML Tag (no need for the "content" tag).


I am going to try and implement this tomorrow on my http://JSBugHunter.Com and see how it goes.

I am very much interested in your opinions of the "layout Beside" Idea - be they for it or against it.

as always points to most interesting/helpful comments.