Log In:Register.
Div/CSS Based Layouts
For a while now I have been contemplating the Div/CSS based layouts over the more traditional table based layouts. I have tried in the past to do a div/CSS based layout, but was always dissappointed with the limitations to such a layout. I was always under the impression that you were limited to a specific width and that your page could not scale with the window.

Well, I have to say that I've been proven wrong, since the page you are looking at is brought to you by the graces of XML/XSL Transformations. I decided to go with the HTML 4.01 Strict DTD as opposed to the Traditional DTD. To my amazement there was a lot that has changed since earlier versions. Workarounds that don't work anymore, and tricks that sadly I'll have to find workarounds to do again until all the browsers are 100% compliant. Then again, maybe these tricks should be considered bad practice and not done. Either way, that is not in the scope of this writing.

One thing I did run into was that, as opposed to the Transitional way, is that 100% now seems to mean 100% of the parent node. I was quite accustomed to using tables that had heights of 100% then setting one of the TD's to 100% to get the layout to span the whole page. That still works as long as you are content that you can only have one row, not multiple rows. When you add another row to the equation, the browser simply pushes the table down by the amount of pixels that the new rows uses (100% of the table's initial height + xPX for the new row). This was of course unacceptable for me, and I had to go on a crusade for a fix.

It amazes me sometimes how people are on the net. It seems to me that if you have a problem then ask on a forum how to fix said problem, that if you seem to fix that problem you should not just put "I fixed it. Nevermind." Apparently I'm wrong, because this seems to be standard practice. Is it so much to ask that if you requested help that you at least provide the answer for those that come to follow? It seems so, as sad as thay may be.

Thanx to some unknown stranger out there though, I have come accross a fix for this little compliance problem. and it goes back to those Div/CSS layouts. No Javascript to resize stuff, just plain Divs and CSS! I'd now like to take the time to thank [b]Borvik[/b], a person who left a href="http://tek-tips.com/viewthread.cfm?qid=1027744&page=1">this nice post on Tek-Tips.com. I am mainly going to be reiterating what he said there so we have more than one place on the net that this resides, though mine differs slighty from his, but you should get the idea on how to create your own based on the information given here.

To start I want to just show you the base Div Structure that I have set up for this site. There are a total of 6 divs for my layout (which as of the writing of this you might not know where they all are, but you'll see it in my file.). It is also note worthy mentioning that at the time of this writing this site used a Header, Vertical menu bar, footer, left side and main content windows. Here is the a sample of my layout:

Div/CSS layout example 1: index.html
<div class="page_header">Header Text</div>
<div class="page_vertMenu"><a style="text-decoration: none;" href="index.html">{writings}</a>{news}</div>
<div id="page_content" class="page_content">
<div class="page_content_sideBar">insert side bar items here.</div>
<div class="page_content_mainContent">insert main content here.</div>
<div class="page_footer">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
            <td style="text-align: left;" class="topMenu">This page took .016 seconds to process using ColdFusion 7</td>
            <td style="text-align: right;" class="topMenu">&copy; 2004 Gargoyle and Sun Productions</td>
As you can see it's pretty simple. to set up. and if you were to run this file as it, the outcome would be less than desireable considering what we are trying to accomplish here. The CSS is what makes the magic happen. Before I go into a in depth description, here is a sample that will work with the above index:
Div/CSS layout example 2: style.css
body,html {  margin : 0px;  background : #c8d3DC;  font-family : Trebuchet MS;  font-size : 8pt;  overflow : auto;  vertical-align : middle;  height:100%; }
html {  overFlow : hidden; }

/* Div Layout */
div.page_header {  position : absolute;  left : 0px;  right : 0px;  top : 0px;  height : 50px; }
div.page_vertMenu {  position : absolute;  left : 0px;  right : 0px;  top : 50px;  height : 16px; }
div.page_content {  position : absolute;  left : 0px;  right : 0px;  top : 68px;  bottom : 17px;  overflow : auto;  text-align : center;  height:expression(document.body.clientHeight-parseInt(this.currentStyle.top,10)-        parseInt(this.currentStyle.bottom,10)+'px');  width: expression(document.body.clientWidth-parseInt(this.currentStyle.left,10)-        parseInt(this.currentStyle.right,10)+'px');    /*overflow-x:auto;*/   }
div.page_footer {  position : absolute;  left : 0px;  right : 0px;  bottom : 0px;  height : 16px;  vertical-align : bottom; }
div.page_content_sideBar {  position : absolute;  left : 0px;  top : 0px;  height : 100%;  width : 100px; }
div.page_content_mainContent {  position : absolute;  left : 100px;  top : 0px; right : 0px;  height : 100%; }
/* end of Div Layout */
Now are you getting it? Seems simple enough once you see it done. Since we are setting the corners of the Divs to specific locations on the window we never have to set a 'height' attribute (unless you are using IE). In my example I have set it up so that the left side bar doesn't show when it has no content. If you know there is going to be content there then all you have to do is set a width for it. And if you are in need of a three column layout just add another div after the 'page_content_mainContent' div and set it's css attributes to the following (this example assumes you want the column to be 100px wide):
Div/CSS layout example 3: third column
/*Inside the html file add:*/
<div class="page_content_rightSideBar">Right content goes here</div>
/*and inside the CSS file add:*/ div.page_content_rightSideBar {  position : absolute;  top : 0px;  right : 0px;  height : 100%;  width : 100px; }  /*you'll also want to make sure you change the    right attribute of your main content div to '101px'*/

It took me a little while (while actually writing this article) to figure this out 100%. I was always under the assumption that 'position:absolute' positioned an object in the window. Well, if you didn't know, as I didn't, this is incorrect. That attribute set to absolute, positions an object within it's container. now this did not allow me to do the collapsing sidebar as I originally stated I did (without testing it.....stupid me). This for most won't matter as most pages either have the sidebars or don't have them. I am still going to work on the collapsable sidebars (without using JS) and if I come up with a solution, I will most definately post it on here for you all to read.

I am not 100% sure on how absolute positioning works. I was under the impression that when you positioned an element it was in respect to it's container. For the most part this is true. I have successfully created a 3 column layout using this theory. However last night I tried to make the whole page scrollable by putting all my divs in one container (a master div if you will). Everthing still worked with one exception: the footer. When I set the bottom and the right attributes it still set them in respect to the window and not the div that contained it. I plan on doing more research on this subject and I will write as I progress.


P.S. - For those of yo uwho care: There is a big draw back to this style layout. While on IE this works flawlessly, FireFox has a bug that does not allow you to scroll using the scroll wheel unless you have a link in that div that has focus on it. I'm sure you've figured this out if you are viewing this page with FireFox already. I have put in a bug report at Bugzilla to let them know if this bug. I don't see a fix coming soon, this problem has been around for a long time and as the time of me reporting the bug it had already been reported and claimed "fixed". Since I am running the newest version and that bug report was inserted in 2001, I don't think it's fixed yet. I love FireFox, so don't comment that I'm bashing it. I'm writing to you on it now. (They replied with what I think was them saying that it will be fixed in 1.1 YEAH!!!!)

(2)Comments | < Back
Saturday, April 16, 2005 by switchprog
That was an incredible idea having your example code boxes scrollable and in close proximity. I browsed the HTML box and then scrolled to the appropriate region in the CSS box. It helps to be able to go back and forth and see where the CSS applies.

Props for good design!
Tuesday, April 19, 2005 by SirMeili
you make it sound like it was on purpose....heheheh ;)
Frank Thompson
aka Sir Meili
Certified Advanced Coldfuction MX Developer
Leave a Comment
Please log in to leave a comment.