Ha- that did it. Awesome - so easy. I feel kinda dumb now but oh well - its not the first time.
Basically, php (or asp, jsp) can dynamically grab different elements for a website and throw them altogether. In my site for example, I have the HTML head and the titlebar in one php block and I have the body in another php block and the footer is in yet another block. Each one of the pages you see on a dynamic site is really a mashup of these blocks. When all the blocks come together, they make a functional webpage.
In the example we were working with, that piece of code I showed you was part of this larger page:
<?php
//included code for page header
include ('/home/hplmt/public_html/header.inc.php');
?>
<div id="content">
<script type="text/javascript" language="javascript" src="http://www.trumba.com/k.aspx?calendar=upcoming_telepresence_events"></script>
</div>
<?php
//included code for page footer
include ('/home/hplmt/public_html/footer.inc.php');
?>
Youll notice I 'call' a php header block, code the middle of the page and then call a php footer block - when a browser reads the page it will all read as one piece. This way, I dont have to code the damn header and footer on each page i create (because they are the same on every page anyway).
Getting back to your question of how the colums are created - the top block in my system also references a stylesheet (CSS2). This stylesheet sets the actual containers for each column on the site. The code in the stylesheet that references how the page will look is here:
/***********************************************/
/* Layout Divs */
/***********************************************/
#container{
width: 880px;
}
#masthead{
padding: 5px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#navBar{
float: left;
width: 190px;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
#content{
float: left;
width: 485px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding-top: 15px;
}
#headlines{
float: left;
width: 190px;
padding-right: 15px;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
You'll notice I have a 'container' tag set at '880px' - that means the entire site will sit inside of an 880px wide space. So way up in the first PHP block I have, I call a <div> (short for division) that will be open in my entire site - ensuring all content sits inside of the 880px width I have defined.
The div will look like
<div id="container">
I then have three other div containers - navbar, content and headlines. Notice each one has its own width. All I do is sequencially open each div up underneath the container div like this:
<div id="navbar">
Then you close the navbar div and open another one (like content) ON THE SAME LEVEL as navbar. The system will line up all the divs as similar block-line elements - putting all three (navbar, content and headlines) next to each other INSIDE of the container div. The container acts like a table and the three other divs act like columns in the old HTML table/column/row system.
At the end of the code in my footer php block I close the container div, just like you would close a table. When a browser interprets all this code, it will only see one giant page.
Hope this helps you understand how it works!