#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    34
    Rep Power
    10

    Okay, why aren't these 2 divs taking on their height values?


    I had my css working fine and then I decided to change the layout and I almost have the new style sheet finished.

    However, I am trying to divide my header field into 2 columns (each 50% of the width), the left most column will have my banner and the right most column will be split in half (each half being 50% of total height), with 2 rows, one for a search field and the other for my main site navigation.

    However, the 2 rows are not taking up the 50% of the height that I would like for them to take up. Any ideas as to why? I tried defining min and max height, but that didn't work...

    Here's my css:
    Code:
    /* CSS Document */
    h1 {
    	font-family: Geneva, Arial, sans-serif;
    	font-size: 20px;
    	color:#000000;
    }
    
    h2{
    	font-family: Geneva, Arial, sans-serif;
    	font-size: 16px;
    	color:#000000;
    }
    
    h4{
    	font-family: Geneva, Arial, sans-serif;
    	font-size: 12px;
    	color:#000000;
    }
    
    /*============================ Begin Layout Structure ============================*/
    #wrapper { /* main container for everything */
    	width: 1024px;
    	min-height: 748px;
    	margin: 0 auto;
    	background: #ffffff;
    	overflow: hidden; /* contain inner floats */
    	position: relative; /* establish the containing block */
    }
    
    #accounttypeselector { /* select personal or business to affect page display */
    	height: 25px;
    	background: #0000FF;
    }
    
    #servicesbar { /* container for user services */
    	height: 30px; /* 30px should be adequate height */
    	width: 100%;
    }
    
    #servicesbar-services { /* container for user services once logged in */
    	float: left; /* push this to left side */
    	width: 75%; /* want it to be 75% of the servicesbar width */
    	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
    	background: #ff00ff;
    }
    
    #servicesbar-login { /* for user login and logout - contained inside servicesbar */
    	float: left; /* should push this just beside services */
    	width: 25%;
    	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
    	background: #8B2323;	
    }
    
    #header { /*header for the site - will contain logo, search, and main navigation */
    	float: left;
    	width: 1024px;
    	height: 100px;	
    }
    
    #header-logo { /* will include site banner/logo - will be located on left side */
    	background: #ff0000;
    	width: 50%;
    	float: left;
    }
    
    #header-rightcol { /* column for search and main nav */
    	width: 50%;
    	float: left;
    }
    
    #header-rightcol-search {
    	min-height: 50%;
    	max-height: 50%;
    	background: #7FFFD4;
    }
    
    #header-rightcol-navmain { /* navbar that will be located below header */
    	min-height: 50%;
    	max-height:-50%;
    	background: #21ee00;
    }
    
    #bodywrapper { /* wrapper for main content - will have 3 columns here */
    	width: 1024px;
    	height: 100%;
    	padding-top: 10;
    }
    
    #bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
    	width: 15%;
    	background: #8B8378;
    	float: left;
    }
    
    #bodywrapper-main { /* main content to be located in middle column of bodywrapper */
    	width: 60%;
    	background: #66CDAA;
    	float: left;
    }
    
    #bodywrapper-news { /* news column to be located in right column of bodywrapper */
    	width: 25%;
    	background: #8A2BE2;
    	float: left;
    }
    
    #footer { /* footer to be located at bottom of wrapper */
    	margin: 0 auto;
    	position: relative;
    	width: 1014px; /* will be 1024 with padding */
    	height: 20px;
    	padding-right: 10px;
    }
    and here's my basic html
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<link rel="stylesheet" type="text/css" href="test2.css" />
    </head>
    <body>	
    	<div id= "wrapper" >
    	
    		<div id= "accounttypeselector" > Lorem ipsum dolor sit amet </div>
    		
    		<div id= "servicesbar" >
    			<div id= "servicesbar-services" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    			<div id= "servicesbar-login" > Lorem ipsum dolor sit amet</div>
    		</div>
    		
    		<div id= "header" >
    			<div id= "header-logo" >
    			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
    			adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
    			penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
    			libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
    			cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    			pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
    			in dui. In eget elit. Praesent eu lorem.</div>
    			
    			<div id= "header-rightcol" >
    				<div id= "header-rightcol-search" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
    				<div id= "header-rightcol-navmain" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
    			</div>
    			
    		</div>
    		
    		<div id= "bodywrapper" >
    		
    			<div id= "bodywrapper-navleft" >
    					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
    					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
    					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
    					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
    					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
    					in dui. In eget elit. Praesent eu lorem.
    			</div>
    			<div id= "bodywrapper-main" >
    				   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
    					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
    					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
    					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
    					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
    					in dui. In eget elit. Praesent eu lorem.			
    			</div>
    			<div id= "bodywrapper-news" >
    				   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
    					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
    					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
    					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
    					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
    					in dui. In eget elit. Praesent eu lorem.			
    			</div>
    		
    		</div>
    	
    	</div>
    	
    	<div id= "footer" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
    </body>
    </html>
    Thanks in advance and any suggestions would be greatly appreciated.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    445
    When defining percentage heights, the parent object needs to have a height defined. Try adding height: 100% to header-rightcol.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    34
    Rep Power
    10
    Originally Posted by rdoyle720
    When defining percentage heights, the parent object needs to have a height defined. Try adding height: 100% to header-rightcol.
    Oh, I thought that since in my html that div was located within my header div that it would inherit the height properties of the header div. IE header is the parent of header-rightcol which is in turn a parent of header-rightI-search and menu. CSS not that "smart"?
  6. #4
  7. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2183
    CSS is plenty smart. Only some properties get inherited. height is not one of them. If you want to have height:100%; to work then make sure to add html, body{height;100%;} at the top of your CSS file first.

    http://www.dave-woods.co.uk/?p=144

    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR

IMN logo majestic logo threadwatch logo seochat tools logo