I am having difficulty with the layout of a page I'm working on. The lower page navigation is not positioning properly - it wraps below the left column instead of staying below the data columns. Additionally, the border for the navigation appears at the top of the page instead of around the navigation itself. Finally, the footer is displaying at the top of the page rather than at the bottom. I've been trying to troubleshoot this for over a day now and can't seem to find where I went wrong.
Here's a simplified version of the code:
.h2b {
/*page title*/
font-size: 17.5pt;
color: #469;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.a {
color: #469;
text-decoration: none;
}
body {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-style: normal;
background-color: #fff;
}
#container {
width: 100%;
margin: 0;
background-color: #fff;
position: relative;
padding: 0;
}
#masthead {
text-align: right;
width: 100%;
background-color: #c5d5e5;
/*width: auto;*/
margin: 0;
padding: 0;
overflow: auto;
}
#page_content {
position: relative;
width: 96%;
/*width: 98%;*/
/*border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;*/
left: 20px;
}
#major_revision {
}
#footer {
background-color: #dfcfbf;
padding-bottom: 5px;
width: auto;
clear: both;
overflow: auto;
}
#masthead img {
float: left;
margin: 0;
padding: 0;
}
#masthead p {
font-size: small;
text-align: right;
color: #000;
margin: 0 0 0 0;
padding: 0;
}
/* Styles for Navigationcommon modified 10-16-2015*/
#navigationcommon {
background-color: #548EBE;
overflow: hidden;
border-bottom: thin black solid;
}
#navigationcommon ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
#navigationcommon li {
float: left;
}
#navigationcommon a {
color: #FFF;
text-decoration: none;
display: block;
padding: 5px;
border: 1px solid #D3D3D3;
background-color: #548EBE;
}
#navigationcommon a:hover {
color: #000;
text-decoration: none;
border: 1px solid #D3D3D3;
background-color: #ADD8E6;
}
/* Styles for Footer */
#footer p {
font-size: x-small;
text-align: center;
color: #393939;
margin: 10px;
padding: 1px;
}
#footer a {
color: #393939;
text-decoration: underline;
}
#footer a:hover {
color: #000;
text-decoration: none;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>PAGE</title>
</head>
<body>
<!-- Begin Container -->
<div id="container">
<!-- Begin Masthead -->
<header id="masthead" onclick="" style="background-color:#0047ff">
<p style="background-color:#0047ff;height:30px; width:104px">
<!--See helper file for paths to image files-->
</p>
</header>
<!-- End Masthead -->
<nav id="navigationcommon" onclick="">
<ul>
<!--See helper file for paths to image files-->
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Contacts</a>
</li>
<li>
<a href="#" onclick="passdata(); return false">Improve</a>
</li>
<li><a href="#">Tailor</a>
</li>
</ul>
<a href="#" style="float:right;font:small-caption;border-style:none;
color:white; vertical-align:bottom;margin-bottom:0px;padding-bottom:0px;padding-left:5px;padding-right:5px">Advanced Search</a>
<!--See helper file for paths to image files-->
<input type="image" src="pill-button-green-clip-art.jpg" style="width: 90px; border-style:none; float:right; height: 28px;" value="Search" onclick="search()">
<input name="search" type="text" maxlength="512" id="search" class="searchField" title="" style="width: 300px;
border-style:none; height: 26px; float:right; padding-right:5px; " value="Enter Keyword">
</nav>
<!-- Begin Page Content -->
<section id="page_content" style="top: 60px;" onclick="">
<div id="major_revision" style="position:fixed;top: 65px;float:left;width:100%;padding: 0 1% 1% 2%;">
</div>
</div>
</div>
</section>
<!-- Begin Footer -->
<div id="footer">
<p>Copyright © All Rights Reserved.</p>
</div>
<!-- End Footer -->
</div>
<!-- End Container -->
</body>
</html>