Page layout with CSS with Header, footer, left content, and right content

I have an asp.net 2.0 application. I need to have a page setup with a header of 75px height width 100%, constently set at the top (not moving). A footer of 25px height width 100%, constently set at the bottom of the screen ( not moving). The main content area is setup in a left pane and a right pane. The left is 23% wide and 100% high, the right pane is 70% wide and 100% high. Both the left pane and right pane can scroll if needed but must do it between the header and footer. I need this to be cross browser compliant and able to adjust to screen size setttings. I have done a lot of research online looking for this I can get the header and footer set. However the main content right and left pane are giving me problems as well as screen size settings. Any help you can give me would be great.
woodjeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

s8webCommented:
If you can describe the kind of problems you are having as well as provide the base code for the page I think a solution could be found.
0
woodjeAuthor Commented:
Problems:

1. The left and right pane's are scrolling together I need them to scroll only if each is needed.
2. The data is scrolling within the header and footer fine at one resolution however if I open the same page on a different monitor with a different resolution the scorlling is incorrect it is overlapping the footer.

Code:
I will below have the code for the master.page, an individual page, and the css file.
****master.page****
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <!--<link rel="stylesheet" media="all" href="http://localhost/pfo_gateway/css/coolstyle.css" type="text/css" />  -->
  <link rel="stylesheet" media="all" href="http://localhost/pfo_gateway/css/style.css" type="text/css" />
  <title>Unified Database</title>
</head>
<body>
<form id="Form1" runat="server">
        <div id="header">
	        <div class="hd1">Unified Database</div>
	        <div class="hd2">
	            <div class="hd3">Welcome:<br /><asp:LoginName ID="LoginName1" runat="server" /></div>
	            <div class="hd6">The Current Date and time is:<br />
				    <script type="text/javascript" src="http://localhost/pfo_gateway/scr/DateTime1.js"></script>
                    <script type="text/javascript" src="http://localhost/pfo_gateway/scr/DateTime2.js"></script>
                    <span id="tick2"></span>
	            </div>
	        </div>
	    </div>    
	    <div id="content">
	        <div id="navigation">
	        <asp:ContentPlaceHolder ID="cp_navigation" runat="server">
                <asp:TreeView ID="TreeView1" runat="server" 
                DataSourceID="SiteMapDataSource1" 
                ontreenodedatabound="TreeView1_TreeNodeDataBound">
            </asp:TreeView>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />                	           
	        </asp:ContentPlaceHolder>
	        </div>
	        <div id="working_content">
            <asp:ContentPlaceHolder ID="cp_content" runat="server">
       
            </asp:ContentPlaceHolder>
            </div>
        </div>
        <div id="footer">
	        <div class="f1">
	            <div class="f2"><a href="mailto:support@domain.com">Help</a><br />
                </div>
	            <div class="f3">&copy; 2009 XXX. ~ All rights reserved.</div>
	        </div>
	    </div>
</form>
</body></html>
 
****sample page****
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="sample.aspx.vb" Inherits="sample" %>
 
<asp:Content ID="Content2" ContentPlaceHolderID="cp_content" Runat="Server">
<div>
    <div id="tt_content">
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
    </div>
</div>
</asp:Content>
 
***style.css****
 
* {
	margin:0em;
	padding:0em;
}
 
body, html {
  margin:0;
  border:0;
  padding:0;
  height:100%; 
  max-height:100%; 
  font-family:arial, verdana, sans-serif; 
  font-size:1em;
  background-color:#9BA29D;  
  /* hide overflow:hidden for IE5/Mac */
  /* \*/
  overflow: hidden;
  /* */
}
 
/* for internet explorer */
* html body {
  padding:0px 0 0px 0;  
}
 
#header {
	top:0px;
	display:block;	
	position:absolute;
	text-align:center;
	z-index:1;
	width:100%;
	height:60px;
	border-bottom:3px solid #000000;	
}  
 
* html #header {
	width:100%;
	height:60px;
}
 
#header div.hd1 {
	width:100%;
	height:40px;
	top:-2px;
	left:-2px;
	text-align:center;
	font:36px arial, verdana, sans-serif;
	font-weight:bold;
	font-style:italic;
	border:none;	
}
 
#header div.hd2 {
	width: 100%;
	height: 20px;
	top: 40px;
	left: -2px;
	text-align: center;
	border:none;
}
 
#header div.hd3 {
	float:left;
	top:40px;
	width: 25%;
	height: 20px;
	text-align:left;	
	border: none;
	padding-left:.5em;
	font:10px arial, verdana, sans-serif;
}
 
#header div.hd6 {
	float:right;
	width:25%;
	height:20px;
	text-align:center;
	border:none;
	top:40px;
	font:10px arial, verdana, sans-serif;
}
 
#content {
	display:block; 
	overflow:auto; 
	position:absolute; 
	z-index:3; 
	top:70px;
	bottom:50px; 
	width:100%;
}
 
* html #content {
	top:70px; 
	bottom:50;	
	width:100%;
}
 
#navigation {
	float:left;
	width:23%;
	height:550px;
	padding-top:2em;
	font:2em;
	z-index:3;
}
 
#navigation ul li {
	margin-top:4px;
}
 
#navigation ul li a {
	display:block;
	width:23%;
	padding: 3px 5px 3px 10px;
	text-decoration:none;
}
 
#navigation ul li a:hover {
	background-color:#ccc;
	color:#000000;
}
 
/* This is the nav menu section */
 
#working_content 
{	
	width:70%;
	height:100%;		
}
 
#footer {
	clear:both;
	position:absolute;
	bottom:0px;
	text-align:right;
	border-top:3px solid #000000;
	z-index:5;
	width:100%;
	height:50px;
}
 
* html #footer {
	bottom:0px; width:100%; height:50px;
}
 
#footer div.f1 {
	width: 100%;
	height: 50px;
	left: -2px;
	text-align: center;
	border: none;
}
 
#footer div.f2 {
	float:left;
	width: 48%;
	height: 50px;
	text-align:left;	
	border: none;
	padding:.5em 0em 0em .5em;
}
 
#footer div.f3 {
	float:right;
	width:48%;
	height:50px;
	text-align:right;
	border:none;
	left:475.5px;
	padding:.5em .5em 0em 0em;
	color:#000000;
	font:18px arial, verdana, sans-serif;
	font-weight:bold;
}
 
/* FOOTER TEXT AND LINK COLORS */
 
/*#foot a:link	{ font:18px arial, verdana, sans-serif; color: #00008B; text-decoration: underline }
 
#foot a:visited	{ color: #B293FE; text-decoration: none }
 
#foot a:active	{ color: #B293FE; text-decoration: none }
 
#foot a:hover	{ font:18px arial, verdana, sans-serif; color: #FF0000; text-decoration: none }*/
 
/* NON-MENU PAGE LINK COLORS */
 
/*a:link		{ color: #009ACD; text-decoration: none; }
 
a:visited	{ color: #CD0000; text-decoration: none; }
 
a:active	{ color: #B293FE; text-decoration: none; }
 
a:hover		{ color: #99CCFF; text-decoration: none; }*/
 
/* HIDE MENU AND ITEMS FOR PRINTING */
 
@media print {
.printhide {display:none;}
.printhelp	{ width:600px; }
}
@media screen{
.printonly { display:none }
}
 
#gateway_master 
{
	padding:0;
	margin:0;
}
/*
#gateway_gv 
{
	padding:0;
	margin:0;
}
*/
#tt_content {
	overflow:auto; 
	position:absolute; 
	width:100%;	
}
#lg_chk {
width:4em;
height:4em;
}	
 
/* Classes */
/*
ItemTemplate td.pfogv_rs {
	padding-left:30px;
	padding-right:30px;
}
 
.pfogv {
	border:solid 1px #ffffff;
	font-size:1.8em;
}
 
.pfogv_header 
{
	font-weight:bold;
}
 
.pfodv 
{
	border:solid 1px #ffffff;
	font-size:1.8em;
}
*/
.Important { 
     font-size: large; 
     color: Red; 
} 

Open in new window

0
woodjeAuthor Commented:
Anyone have in luck in looking at this yet?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

s8webCommented:
Can you post a link to where this page is running? I don't have a ASP server model to test your css and markup on.
0
woodjeAuthor Commented:
Sorry this is only on a local machine right now. And our company is behind a serious firewall. Really makes it hard to work sometimes.
0
woodjeAuthor Commented:
Experts,

Any thoughts?
0
woodjeAuthor Commented:
Thanks everyone I was able to get this working with css. It just took a lot more time then I really had. But is a good place to start for the next project.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.