In the Web Development topics of forums across the Internet, many web developers trying to do the transition from table based layout (a 20th century relic) to CSS based layout have a problem giving up the grid. They go from a strictly controlled table grid to a grid made of div tags. To make such a grid structure work they need all kinds of hacks or end up with absolute positioning. The final structure is rigid and looks like a table. For some reason they think that is how a web page is supposed to look.

When I say rigid I am not talking about rigid like steel. Indeed no; they have created a glass house that will shatter and crumble into a million pieces when the first hailstone hits it.

This article is addressed to those grid-bound developers trying to make a transition to CSS and still not understanding that the essence of CSS based layout is fluidity. If a page is put together with components then the components can go anywhere on the page, be any dimension desired, and carry whatever attributes are appropriate for the type of content they present.

The developer does not have to control the page. That is the browsers job. The developer does not have to decide the best presentation. The user would prefer to have control of that themselves. The developer's job is to create the content format; containers for the content in the form of components based on the HTML tags; containers for the widgets that support the pages (nav, link list, search box); and put the right pieces in the right order in a loose easily driven framework.

Here is a page that takes that to an extreme. A set if divs that start out in a grid. Then get some changes in look, and with nothing more than changes in a single CSS property (width) the layout shifts, re-aligns, re-organizes and give presentation options that are not even possible to imagine in a grid structure.

Just let it run a while and take a look at the many possible arrangement of the simple basic rendering boxes being used. Now instead of 10 boxes in a grid there are 10 components dynamically shifting as a small script keeps changing the rules. The browser does all the work, all the scripting does is change a single value on the style of a div.

When you are done looking at it we will explore the code and how it can be used in more serious applications. CAUTION: if you are a real grid freak, looking at the page too long might cause brain damage by making you consider something other than a grid. Anti-grid.

The initial styling of the divs is: div { width:47%; float:left; border:4px ridge lightskyblue; color:darkviolet; background-color:linen; margin-top:10px; margin-left:7px; } Nothing special at all. The width of 47% gives it just a little wiggle room so both Moz and IE will render it correctly. The float is the key to the effects. The rest is just to give it an ugly look.

The color shifts are just simple styling swaps from scripting. On load we start it with: function changeClr() { str="div"+i; obj=document.getElementById(str); dotransition(obj); i=Math.round(Math.random()*9); if (!End) setTimeout('changeClr()',500); } The divs have ids "div0" through "div9"; The first line sets a string to the name of a div using the index (i). Then the object-handle is created and passed as an argument to the function that does the transitions. After the transition, a new random value is set for the index used to select the target div for the next iteration. If the user has not clicked to stop the effect, a timeout of half a second is used to launch the next iteration.

The function to do the transition looks like this: function dotransition(EL) { EL.style.border='4px ridge '+getclr(); x=(document.all)? 0:1; EL.childNodes[x].style.color=getclr(); EL.style.backgroundColor=getclr(); cnt++; if (cnt>10) { cnt=0; num=Math.round(Math.random()*48+10); EL.style.width=num+'%'; } } First the border gets a color change... I'll get to the getclr() function in a minute, but what it does is return a color value string #nnnnnn. The text in the box is actually in an h3 tag so we can't directly address it without using a nodes reference and that presents a cross browser issue. Mozilla counts the linefeed as a text node, but IE does not so we test for IE with detection of the IE specific object document.all to set the right pointer value for the child node for the h3. Then we change the text color of the child, and the background color of the div.

If we have done 10 iterations since the last layout change we generate a new random width and apply that.

The function to get the color uses an array:
chr = new Array("0","1","2","3","4","5","6","7","8", "9","a","b","c","d","e","f");
So that it can return a valid color string using: function getclr() { locstr='#'; for (j=0;j<6;j++) { locstr+=chr[Math.round(Math.random()*15)]; } return locstr; }
That's it! It's done. The browser gets a new width for the randomly selected div and then recalculates what the position of every div has to be for that size to be applied. Because of the float, the sequencing of the divs can produce just about any combination of relationships between the components.

Obviously this is not a practical way to do a real layout but the addition of a property grabber on this version makes it possible to get the values of the divs when an interesting layout is presented. YES I USED A TABLE. It is tabular data! Now there is an interesting concept; using a table for its intended purpose... it seems to do it quite well... maybe using tags for their designed purpose might be a good idea. You Think!!! Maybe?

Just in case there are some positioning control freaks who have read this far; this is what happens when you get stupid and use absolute positioning instead of letting thing float and position themselves. There are times when those kinds of overlays are useful, but most of the time absolute position creates a big mess.

Search ERT on the Tools Page

Cd&