Horizontal Space -- Layout Issue

**sainraja** · Oct 2, 2012 21:14

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.

JustPixelsScreen 2.jpg

Here is the CSS:

Code:

/** 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:

Code:

<!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 &copy; 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.

code.zip

**dresden_phoenix** · Oct 2, 2012 22:22

reason:
you set the width of the rest of your #wrappers at 940px; so you will need to add min-width:940px; to BOTH your strip elements.

Oh, btw.. really using IDS for everything is very inefficient and heavy handed. try to find common traits and use classes instead and save the ID for truly unique elements. Also, TOP:/BOTTOM:/LEFT: /RIGHT: attributes only affect positioned elements.

for example:
#strip {width: 100%; height: 17px; top: 0px; background-color: #2e2e2e; min-width:940px;}
top: 0px; does NOTHING there... get rid of it.

Actually.. are you intending to lace content INSIDE the top strip? if the answer is 'no' , then why not get rid of it all together and use something like body{ border-top:#2e2e2e 17px solid; min-width: 940px}?

hope my suggestions help

**sainraja** · Oct 4, 2012 06:18

I took your advice on the top strip, so I am using the border property now. I'll look into using classes and using less ID's and your min-width suggestion worked. I am not sure why that fixed it though, if you could let me know. That would be great. I did a template with a similar layout and it works fine without specifying min-width.....maybe I had a width specified for every wrapper. I will take a look at that one again.

Thanks for your help!

**ralph.m** · Oct 4, 2012 06:25

If you don't set a min-width, as you make the viewport smaller it resizes the element, making it narrower. When you widen the browser, the element doesn't get wider again. That's why you have to prevent it from getting narrower in the first place.

User Tag List

Thread: Horizontal Space -- Layout Issue

Thread Tools

Display

Horizontal Space -- Layout Issue

Bookmarks

Bookmarks

Posting Permissions