Complex DIV Design

[Arsenal]

I have been trying to make a div layout that load in this order.

[list]
[*]Header
[*]Left Menu
[*]Content Background
[*]Right Menu
[*]Content
[/list]

[IMG]http://i137.photobucket.com/albums/q227/lucaskeiser/Div-Layout.gif[/img]

The goal is to have the layout load before the content so that if there is a problem with the content, it won't effect the display ie. using [code]die();[/code] while rendering content.

[richei]

Its not worth the headache of laying that out.  Simpler to just use a regular table.  I did the same thing with divs and it was a nightmare trying to figure out what was affecting what.

Its not that difficult to do with divs though, just make use of the positioning elements in ur css file or within the tag (if that's how you're doing it). 

[btd117]

I'm not quite sure what you mean about the layout loading before the content...
Anyway I would lay it out like this:

<table>
  <tr>
      <td colspan="3"><div></div></td>
  </tr>
    <tr>
      <td><div></div></td>
      <td><div></div></td>
      <td><div></div></td>
  </tr>
    <tr>
      <td colspan="3"><div></div></td>
  </tr>
</table>

Then you can apply the styles in each div and the other tags however you want.

[Arsenal]

When rendering the page, the order usually loads in this order header, left menu, content, right menu, footer. The problem with that is if the included content page, scripted in PHP, uses the die or exit function, anything past that point will not get rendered. I want the layout to be displayed and then the content to run. As an added complication, it would also need to be able to keep fluidity. This is my first run in DIVs.

[code]
<div class="header">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="bumper" rowspan="4"></td>
<td valign="middle">
<table class="announcement" width="300px" cellpadding="2" cellspacing="1" border="0">
<tr>
<th class="announcement">
<img src="themes/connected/images/next_auction.gif" alt="" border="0" />

</th>
</tr>
<tr>
<td class="announcement">
<img src="themes/connected/images/next_auction_bottom.gif" alt="" border="0" />
</td>
</tr>
</table>
</td>

<td align="center">
<img src="themes/connected/images/storall_logo.png" alt="" border="0" />
</td>
<td width="300px">
</td>
<td class="bumper" rowspan="4"></td>
</tr>
</table>
</div><div class="subheader">

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="3">
<table width="100%" cellpadding="2" cellspacing="0" border="0">
<tr>
<td width="4px" rowspan="2"></td>
<td class="body_nav" align="center" width="20%" rowspan="2"><img src="themes/connected/images/navigation.gif" alt="" /></td>
<td></td>
<td width="4px" rowspan="2"></td>

</tr>
<tr>
<td class="subheader"> <a href="index.html">Auctions</a> |</td>
</tr>
</table>
</td>
</tr>

</table>
</div>
<div class="bumper">
</div>
<div class="body"> <div class="left_menu_frame">
<div class="bumper"></div>
Extras Menu Here
</div>
<div>
Body Content Here
</div></div>

<div class="bumper">
</div>
<div class="footer">
<table width="100%" cellpadding="2" cellspacing="0" border="0">
<tr>
<td class="footer_bumper_left"></td>
<th class="footer_sides">
<img src="themes/connected/images/privacy_policy.gif" alt="" border="0" />
</th>
<th class="copyright" rowspan="2">

<img src="themes/connected/images/copyright.gif" alt="" border="0" />
</th>
<th class="footer_sides">
<img src="themes/connected/images/terms_conditions.gif" alt="" border="0" />
</th>
<td class="footer_bumper_right"></td>
</tr>
<tr>
<td></td>

<td></td>
</tr>
</table>
</div>
<div class="content">
<p align="justify">We would like to take this opportunity to thank you for choosing :ACMS.
  is free software provided for distribution by <a href="http://www.endurofusion.net/" target="_efn">Enduro Fusion Network</a>,
which does not charge for usage. However, if you enjoy using , we do encourage you to support this project by registering with
<a href="http://www.endurofusion.net/index.php?EFN=Register" target="_efn">Enduro Fusion Network</a> and make a donation to keep us running.
<br /><br />
Welcome to .
To start the installation process, please click on &quot;Begin Install&quot;</p>

</div>
[/code]

[code]
/* CSS Document */
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-attachment: fixed;
background-color: #314550;
background-image:  url(images/background.jpg);
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
}

div.header{
position: static;
z-index: 1;
width: 100%;
}

div.subheader{
position: static;
z-index: 1;
width: 100%;
}

div.body{
position: static;
z-index: 0;
height: 100%;
background-color: #FFFFFF;
border: 1px solid #000000;
padding: 2px;
}

div.left_menu_frame{
position: static;
z-index: 1;
width: 20%;
}

div.right_menu_frame{
position: static;
z-index: 3;
width: 20%;
}

div.footer{
position: static;
z-index: 0;
width: 100%;
bottom: 0px;
}

div.content{
position: absolute;
z-index: 3;
padding: 2px;
top: 170px;
left: 20%;
right: 20%;
}

td.bumper{
width: 5%;
}

table.announcement{
border: 1px solid #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}

th.announcement{
background-color: #000000;
}

td.announcement{
background-color: #000000;
}

td.body_nav{
background-color: #838B8E;
border-top: 1px solid #000000;
border-bottom: 1px none #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}

td.subheader{
background-color: #424A4D;
border-top: 1px solid #000000;
border-bottom: 1px none #000000;
border-left: 1px none #000000;
border-right: 1px solid #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: center;
}

td.subheader a:link, a:visited{
font-weight: bold;
color: #FFF200;
text-decoration: none;
}

td.subheader a:hover{
font-weight: bold;
color: #FFF200;
text-decoration: blink;
}

td.subheader a:active{
font-weight: bold;
color: #BF5A00;
text-decoration: none;
}

td.body{
background-color: #FFFFFF;
border: 1px solid #000000;
padding: 2px;
}

td.left_menu{
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 10px;
}

th.copyright{
background-color: #838B8E;
border-top: 1px none #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}

th.footer_sides{
background-color: #424A4D;
border-top: 1px none #000000;
border-bottom: 1px solid #000000;
border-left: 1px none #000000;
border-right: 1px none #000000;
}

td.footer_bumper_left{
border-top: 1px none #000000;
border-bottom: 1px none #000000;
border-left: 1px none #000000;
border-right: 1px solid #000000;
}

td.footer_bumper_right{
border-top: 1px none #000000;
border-bottom: 1px none #000000;
border-left: 1px solid #000000;
border-right: 1px none #000000;
}
[/code]

[fenway]

I'm not sure what you mean about content loading either... isn't this from a single PHP script?