Hey everyone,

This is my first time designing a website, and I am having trouble getting my headerMenu to scroll horizontally with the rest of the page when the window is either re-sized or zoomed. I know I have #header {position:fixed;} but I need the header and its contents to be fixed to the top of the page. Can this be remedied with just CSS/HTML? I can easily put a scrollbar at the bottom of the header, but looks-wise I was hoping there was some other option.

Dont mind the logo not blending in with the header, the graphics are being changed for the jpg currently.

Any help would be appreciated!

Code HTML4Strict:
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style1.css">
	<title> Georgia Rollforming Inc. </title>
</head>
<body>
	<div id="header">
		<div class="inner">
			<div id="logo">
				<a href="home.html">
				<img src="images/logo.jpg" alt="Georgia Rollforming Logo" width="282" height="120">
				</a>
			</div>
			<div id="headerMenu">
				<ul>
					<li><a href="home.html"> Home </a></li>
					<li><a href="capabilities.html"> Capabilities </a></li>
					<li><a href="products.html"> Products </a></li>
					<li><a href="astm.html"> ASTM </a></li>
					<li><a href="submittal.html"> Submittal Forms </a></li>
					<li><a href="contact.html"> Contact Us </a></li>
					<li><a href="about.html"> About Us </a></li>
				</ul>	
			</div>
			<div id="bilingualMenu">
				<ul>
					<li><a href="english.html">English</a></li>
					<li>|</li>
					<li><a href="spanish.html">Espanol</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div id="wrapper" align="center">
		<div id="content1">
 
			<p>This is just example text.</p>
 
		</div>
	</div>
 
</body>
</html>

Code CSS:
html {
	overflow-y: scroll;
	overflow-x: auto;
	}
 
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background:url("images/gradient.jpg");
	background-attachment: fixed !important;
	background-size: 100% 100%;
	font-family: "verdana"; font-size: 11px;
	bottom: 0;
	color: #ffffff;
	}
 
#wrapper {
	width: 1080px;
	margin: 0 auto;
	padding-top: 240px;
	}
 
/*======== FIXED HEADER ========*/
 
#header {
	position: fixed;
	height: 140px;
	width: 100%;
	background-color: #000000;
	margin: 0 auto;
	overflow-x: auto;
	overflow-y: hidden;
	}
 
.inner {
	position: relative;
	margin: 0 auto;
	width: 1280px;
	height: 100%;
	}
 
#logo {
	position: absolute;
	left: 0px;
	}
 
#logo img {
	border: 0;
	}
 
/*======== BILINGUAL NAVBAR ========*/	
 
#bilingualMenu ul{
	margin: 0 0 0 0px;
	padding: 5px;
	list-style-type: none;
	position: absolute; right: 0; top: 0;
	font-family: "Verdana";
	font-size: 10px;
	font-weight: bold;
	}
 
#bilingualMenu ul li {
	display: inline;
	padding: 0px;
	float: left;
	}
 
#bilingualMenu ul li a {
	text-decoration: none;
	padding: .2em 1em;
	color: #ffffff;
	}
 
#bilingualMenu ul li a:hover {
	color: #4b4b4b;
	}
 
/*======== END BILINGUAL NAVBAR ========*/	
 
/*======== HEADER MENU ========*/
 
#headerMenu ul { 
        margin: 0 0 0 0px; 
        padding: 10px; 
        list-style-type: none; 
        position: absolute; right: 0; bottom: 0; 
        margin-bottom: 2px;
		font-family: "Verdana";
		font-size: 15px;
		font-weight: bold;
		} 
 
#headerMenu ul li {  
        display: inline; 
		padding: 15px;
        } 
 
#headerMenu ul li a { 
        text-decoration: none; 
        padding: .2em 1em; 
        color: #895331; 
 
        } 
 
#headerMenu ul li a:hover { 
        color: #ffffff; 
		} 
 
/*======== END HEADER MENU =========*/
/*======== END FIXED HEADER ========*/
 
 
 
 
/*======== TRANSPARENT CONTENT BOX ========*/
 
#content1 {
 
	width: 1000px;
	height: auto;
	padding: 10px 40px 40px;
	margin-bottom: 120px;
	background-color: rgba(137,83,49,0.3);
	border: 1px solid #4b4b4b;
 
	}
 
#content1 p {
	text-align: left;
	font-family: "verdana";
	font-size: 14px;
	font-weight: bold;
	color: #fffff0;
	}
 
/*========  END TRANSPARENT CONTENT BOX ========*/