Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Someone Help me understand WHY this has to be done this way....so i don't forget

    Ok so here is my css code and html code....the problem I was having was that the "left_nav" column with a border so I could see it, wasn't the same size as the other longer right side....so after a few hours of researching and trying different things i found a solution.... to set html and body to height 100%...and it worked........ BUT WHY??

    I think If I understand the why of it, I'll know for future reference.

    thanks ahead of time.

    Code:
    *{
    	padding:0px;
    	margin:0px;
    	font-family:Garamond;
    	font-size:20px;
    }
    
    .right{
    	float:right;
    }
    
    .left{
    	float:left;
    }
    
    .clear{
    	clear:both;
    }
    
    html,body{
    	height:100%;
    }
    
    #wrapper{
    	width:800px;
    	height:100%;
    	margin:10px auto;
    	padding:15px;
    	position:relative;
    }
    
    #header_nav{
    	min-height:100px;
    	margin:0px 0px 10px 0px;
    	position:relative;
    }
    
    #header_nav img{
    	float:left;
    	height:100px;
    	margin:5px;
    }
    
    #header_links{
    	width:70%;
    	padding:10px;
    	margin:0px 5px 0 auto;
    	line-height:90px;
    }
    
    #header_links a{
    	margin:0px 20px;
    }
    
    #header_links a:hover{
    	color:purple;
    	font-weight:bold;
    }
    
    #left_nav{
    	width:250px;
    	height:100%;
    	margin-right:10px;
    	margin-bottom:5px;
    	padding:0px 15px 25px 15px;
    	border:1px solid purple;
    }
    
    #left_nav h3{
    	font-size:20px;
    	font-weight:bold;
    	text-align:center;
    	margin:10px 0px;
    }
    
    #right_content{
    	width:60%;
    	border:3px solid black;
    }
    
    #right_content img{
    	height:250px;
    	margin:0px 10px 0px 0px;
    }
    
    #footer{	
    	text-align:center;
    	width:100%;
    	padding:40px 0px 10px 0px;
    }
    and here is the html....

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    	<title>My Css assignment on village88</title>
    	<link rel="stylesheet" href="style.css" />
    </head>
    <body>
    	<div id="wrapper">
    		<div id="header_nav">
    			<img src="http://i.i.com.com/cnwk.1d/i/tim/2011/03/16/Chrome-logo-2011-03-16.jpg" alt="Google Logo" />
    			<div id="header_links">
    				<a href="">About Us</a>
    				<a href="">Portfolio</a>
    				<a href="">Clients</a>
    				<a href="">Contact Us</a>
    			</div>
    			<div class="clear"></div>
    		</div>
    		
    		<div id="left_nav" class="left">
    			<h3>
    				CYU: cee why you...use css!!
    			</h3>
    			<p>CSS is awesome and I'm so glad I am getting better and better. 
    				These tutorials are great to help improve!
    			</p>
    		</div>
    		
    		<div id="right_content" class="left">
    			<img src="http://i179.photobucket.com/albums/w320/carinlynchin/2012-05-21_10-56-41_85.jpg" alt="My 2nd custom mod" class="left" />
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    		</div>
    		<div class="clear"></div>
    		<div id="footer">
    			Copyright 2012 (Carine Callo)
    		</div>
    	</div>
    </body>
    </html>

    EDIT!!! ************8
    I added a background to the wrapper to see it and it turns out that the colummns were overflowing the wrapper...after seraching for an answer, i had to and add overflow:hidden.....the problem was that it would cut off the page and you couldn't scroll...then found another answer.... change the height from 100% to auto .....why? if 100% fills the entire page, then why wouldn't it work but as soon as I set it to auto, it all worked....please someone explain the WHY of that too.
    Last edited by carinlynchin; 06-06-2012 at 12:55 AM.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    100% fills the entire viewing area. If the page content is longer than the viewing area then it overflows. With overflow:auto the page height is made bigger than 100% so that the content can fit (overflow:scroll does basically the same thing). With overflow:hidden only as much of the page as fits within the 100% viewport height can be displayed.

    The 100% refers to the browser viewport - not to the page content.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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