Divs Overlapping When Loading External Page

[dinot1985]

Hi everyone :)

I have a page constructed with divs that line up properly when empty. Then when I use PHP to load an external page within a div (for use of updating multiple pages at once such as navigation), when previewed in a browser the divs overlap with the last one being on top.

This is the page currently unsolved.
http://www.gdm-sia.com/newGDM/index.php

And this is how I want it looking. The red illustrating the PHP loaded divs.
http://img.photobucket.com/albums/v712/devillisin/site-1.jpg

Now I am using Dreamweaver to preview the site while I work on it and I figured after reading the coding that maybe its a CSS poroblem. Nothing is jumping out at me.


CSS


body,td,th {
font-size:62.5%%;
font-family: Tahoma, Geneva, sans-serif;
color: #c0c0c0;
}
html>body {font-size:10px}
body {
background-color: #000;
margin: 0px 20px 0px 20px;
}
a:link {
color: #09F;
}
a:hover {
color: #CFF;
}
h1 {
font-size: 2em;
color: #09F;
}
h2 {
font-size: 1.5em;
color: #09F;
}
h3 {
font-size: 1.25em;
color: #09F;
}
h4 {
font-size: 1em;
color: #09F;
}
#site {
width:975px;
height:1000px;
z-index:1;
visibility: visible;
margin: auto;
position: relative;
}
#nestLinks{
width:970px;
height:20px;
z-index:2;
background-color: #242424;
margin-top: 10px;
}
#header{
width:975px;
height:208px;
z-index:3;
min-height: 208px;
top: auto;
}
#navigation {
width:975px;
z-index:4;
height: 60px;
min-height: 60px;
}
#content {
width:975px;
height:500px;
z-index:5;
min-height: 500px;
}
#footer {
width:975px;
height:150px;
z-index:6;
min-height: 150px;
top: 500px;
}


BODY


<div id="site">
<div id="nestLinks" style="color:#FFF; padding-top: 10px; padding-left: 5px; min-height: 20px;">home</div>
<div id="header">
<?php include $_SERVER['DOCUMENT_ROOT'] . '/newGDM/banner.php'; ?>
</div>
<div id="navigation"><?php include $_SERVER['DOCUMENT_ROOT'] . '/newGDM/navigation.php'; ?></div>
<div id="content"></div>
<div id="footer"><?php include $_SERVER['DOCUMENT_ROOT'] . '/newGDM/footer.php'; ?></div>
</div>

Thank you for any help.

[simcomedia]

You need to add float: left; to your main divs. That forces the divs to 'stack':

#nestLinks{
width:970px;
height:20px;
z-index:2;
background-color: #242424;
margin-top: 10px;
float: left;
}
#header{
width:975px;
height:208px;
z-index:3;
min-height: 208px;
top: auto;
float: left;
}
#navigation {
width:975px;
z-index:4;
height: 60px;
min-height: 60px;
float: left;
}
#content {
width:975px;
height:500px;
z-index:5;
min-height: 500px;
float: left;
}
#footer {
width:975px;
height:150px;
z-index:6;
min-height: 150px;
top: 500px;
float: left;
}


Then add this to your CSS sheet:

.clear {
clear: both;
}

you will need to insert that just before your #footer div and just after the end of the #content div

You also don't need both the height: XXX; and the min-height: XXX; If you want the content area to be a certain height then just use the min-height: XXX; since it will expand automatically with the amount of content inserted (vertically) but would cause scrollbars to appear if you set a max height ( height: XXX;).

[dinot1985]

Thanks! That helped. After I posted the OP I realised the pages being called in still had the head and body tag, so the loaded page had 4 of each. After I removed them it worked partially. Your info has made it fully functional.

[simcomedia]

Glad to help :)