[SOLVED] Layout issue

lmhart · November 16, 2009

I can not get my page to layout correctly.

I have three different div's at the top of a page. The first is header, second is nav, and third is mainbody.

I have used different colors to identify the different div's for right now. It lays out fine but when I add the menu it moves the menu to mainbody section. I have attached screen shots.

Here is my code

<?php
header("Expires: ".gmdate("D, d M Y H:i:s")." GMT"); // Always expired 
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");// always modified 
header("Cache-Control: no-cache, must-revalidate");// HTTP/1.1 
header("Pragma: nocache");// HTTP/1.0 
?>
<html>
<head>
<title>Expense Tool</title>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  	<link href="style.css" rel="stylesheet" type="text/css" />
</head
<body>

<div id=header>
Main street web solutions -> Expense Tracker v 1.01
</div>

<div id=nav>
 <?php include'../includes/menu.php'; ?>

</div>

<div id=mainarea>
	welcome to my site I hope you find in to your liking
</div>


</body>
</html>

This is the code that produces the correct color pattern without the menu

<?php
header("Expires: ".gmdate("D, d M Y H:i:s")." GMT"); // Always expired 
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");// always modified 
header("Cache-Control: no-cache, must-revalidate");// HTTP/1.1 
header("Pragma: nocache");// HTTP/1.0 
?>
<html>
<head>
<title>Expense Tool</title>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  	<link href="style.css" rel="stylesheet" type="text/css" />
</head
<body>

<div id=header>
Main street web solutions -> Expense Tracker v 1.01
</div>

<div id=nav>
 Menu section

</div>

<div id=mainarea>
	welcome to my site I hope you find in to your liking
</div>


</body>
</html>

My style sheet

#header	{	
	/*margin:0 auto;*/
	/*text-align:left;*/

	margin-left:0 auto;
	margin-right:0 auto;
	background-color:#CCCCCC;
	/*min-height:600px;
	max-height:inherit;
	min-width:800px;*/
}


#mainarea {
	background-color:#00CC33;

	margin-left:0 auto;
	margin-right:0 auto;


}

#nav {
	background-color:#FFFF66;
	list-style:none;
}

#nav li {
background-color:#FFFF66;
width: 5em;
float: left;
margin: 0 0.3em;
padding: 0;
list-style:none;
display: inline;
}

#nav ul {
background-color:#FFFF66;
list-style:none;
}

I am not sure why it is doing this. So that makes it hard for me to try an resolve

[attachment deleted by admin]

Sign In

[SOLVED] Layout issue

Recommended Posts

lmhart

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information