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.


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