SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Space -- Layout Issue

    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

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •