I am having an odd issue where if I resize the browser window down and try to scroll to towards the right, the footer and the header strip won’t stretch across. I am not sure why that is happening. I have attached the files and a screenshot.
Here is the CSS:
/** Global Styles **/
img {border: 0;}
html, body {height: 100%;}
/** global page styles **/
#strip {width: 100%; height: 17px; top: 0px; background-color: #2e2e2e;}
#wrapper {position: relative; width: 940px; margin: 0 auto -200px; min-height: 100%; height: auto !important;}
#site_logo {position: relative; width: 275px; top: -17px;}
#site_logo a:link {font-family: Pacifico, Arial, Helvetica; text-decoration: none; display: block; padding: 16px 0 0 25px; font-size: 28px; height: 55px; border-radius: 0 0 5px 5px; background-image: url("../images/logo_bg.png"); background-repeat: no-repeat; background-color: #5a87aa; color: #1e3c55}
#site_logo a:visited, a:hover {color: #1e3c55;}
#portfolio {width: 940px; height: 425px; background-color: #fff; margin-bottom: 65px;}
#portfolio > ul > li {float: left; width: 459px; height: 425px; background: url("../images/t_bg.jpg") no-repeat; margin-right: 21px;}
#portfolio li:last-child {margin-right: 0px;}
#portfolio img {position: relative; top: 20px; left: 20px;}
#portfolio a {background: none;}
.title {font-family: bariol_boldbold, Helvetica, sans-serif; text-transform: uppercase; color: #5a87aa; margin: 40px 0px 10px; font-size: 24px;}
.push {height: 200px;}
/** site nav **/
#site_nav {position: absolute; font-size: 20px; font-family: bariol_boldbold, Helvetica, sans-serif; top: 15px; right: 0px; font-weight: bold; text-transform: uppercase;}
#site_nav ul li {float: left; padding-right: 30px;}
#site_nav li:last-child {padding-right: 0px;}
#site_nav a {display: block; text-decoration: none;}
#site_nav a:link {color: #2e2e2e;}
#site_nav a:visited {color: #2e2e2e;}
#site_nav a:hover {color: #5a87aa;}
#site_nav a.active {color: #5a87aa;}
/** content **/
#intro {font-family: bariol_boldbold, Helvetica, sans-serif; clear: both; color: #696969; margin-bottom: 65px; line-height: 45px;}
.intro_text {font-size: 40px;}
.name {text-transform: uppercase; color: #5a87aa;}
/** footer **/
.arrows {position: relative; width: 100%; height: 19px; background: url("../images/arrows.jpg"); background-position: left top;}
#footer_bar {position: relative; width: 100%; height: 200px; background-color: #5a87aa; background: url("../images/bs_pattern.jpg");}
.skillset {width: 940px; margin: 0 auto; padding: 40px 0 25px;}
.skillset > dl {font-family: bariol_boldbold, Helvetica, sans-serif; font-size: 20px;}
.skillset dt {padding-bottom: 5px; color: #456985;}
.skillset dd {padding-bottom: 25px; color: #fff;}
#copyright_bar {font-family: bariol_boldbold, Helvetica, sans-serif; font-size: 12px; height: 31px; background-color: #2e2e2e;}
.copyright_txt {width: 940px; margin: 0 auto; overflow-x: none;}
.copyright_txt > p {float: right; color: #8d8d8d; text-transform: uppercase; padding: 10px 0 0 0;}
Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Just a Few Pixels</title>
<link rel="stylesheet" href="css/reset.css" title="mainlayout" type="text/css" media="screen">
<link rel="stylesheet" href="css/styles.css" title="mainlayout" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='css/typography.css' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- top strip-->
<div id="strip">
<!-- endstrip--></div>
<!-- start wrapper-->
<div id="wrapper">
<!-- start header-->
<div id="header">
<!-- logo-->
<div id="site_logo">
<h1><a href="index.html">Just a Few Pixels</a></h1>
<!-- end logo-->
</div>
<!-- main navigation-->
<div id="site_nav">
<ul class="nav">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="#">Resume</a></li>
</ul>
<!-- main navigation-->
</div>
<!-- end header -->
</div>
<!-- start portfolio-->
<h2 class="title">Portfolio</h2>
<div id="portfolio">
<ul>
<li><a href="index.html"><img src="images/portfolio/thumbnail_1.jpg" alt="Website Thumbnail" /></a></li>
<li><a href="index.html"><img src="images/portfolio/thumbnail_2.jpg" alt="Website Thumbnail" /></a></li>
</ul>
<!-- end portfolio-->
</div>
<!-- start intro-->
<div id="intro">
<p class="intro_text">I am <span class="name">Hussain Raja</span>. I am a Web Designer based in Northern Virginia.</p>
</div>
<!-- end intro-->
<div class="push"></div>
<!-- end wrapper-->
</div>
<!-- footer bar-->
<div id="footer_bar">
<!-- arrows -->
<div class="arrows">
<!-- end arrows -->
</div>
<!-- start skillset-->
<div class="skillset">
<dl>
<dt>Skills</dt>
<dd>HTML, CSS</dd>
<dt>Software</dt>
<dd>Adobe Photoshop, Adobe Illustrator, Adobe Indesign, Microsoft Office</dd>
</dl>
<!-- end skillset-->
</div>
<!-- end footer bar-->
</div>
<!--start copyright-->
<div id="copyright_bar">
<!--copyright text-->
<div class="copyright_txt">
<p>Copyright © Just a Few Pixels</p>
<!-- end copyright_txt -->
</div>
<!--end copyright bar-->
</div>
</body>
</html>
I have also attached the files in case you need them.