SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% Height problems

    Once again, stuck...Anyways I looked at the FAQ "How to achieve 100% height", looked at my markup and still can't figure out why it isn't working for me.

    http://www.baublitz.com/demos/v3/skilledlabor.htm

    css
    Code:
    #html_content_2_column {
    	position: relative;
    	width: 760px;
    	top: -4px;
    }
    	
    #html_content_2_column_left {
    	position: relative;
    	float: left;
    	width: 150px;
    	/* hack: Gets mozilla to show it even if it is empty */
    	padding-top: -1px;
    	padding-bottom: 1px;
    	/* end hack */
    	height: auto;
    	border-left: 10px solid #FFF;
      	border-right: 1px solid #FFF;
      	border-bottom: 1px solid #FFF;
      	background-color: #999;
    }
    
    #html_content_2_column_right {
    	position: relative;
    	left: 161px;
    	width: 589px;
    	height: auto;
    	border-right: 10px solid #FFF;
      	border-bottom: 1px solid #FFF;
      	background-color: #666;
    }
    	
    .clear {
    	position: relative;
    	clear: both;
    	width: 1px;
    	height: 25px 
    }
    html
    Code:
    <div id="html_content_2_column">		
    		<div id="html_content_2_column_left">
    			<h3 title="Navigation">Navigation</h3>
    				<ul id="subsection_nav">
    						<li id="iso_nav"><a href="#" title="ISO Certification">ISO Certification</a></li>
    				</ul>				
    		</div>	
    		<div id="html_content_2_column_right">
    			<h3 title="Skilled Labor">Skilled Labor</h3>
    					<h4>Baublitz Advertising Six Marketing Strategies for the Downturn of 2007</h4>
    					<p>Skilled people are difficult to find...</p>
    		</div>
    		<!-- end right column -->
    		<div class="clear">&nbsp;</div>
    	</div>

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Well you didn't include a 100&#37; height anywhere in your CSS so that's why it wasn't working..

    You need to include something like this:
    Code:
    /* commented backslash hack \*/ 
    html, body{height:100%;} 
    /* end hack */
    html,body {margin:0;padding:0}
    #container {min-height:100%;height:auto;background:#ffffcc}
    * html #container {height:100%;}/* ie6 and under*/
    Read the FAQ after "Another way to achieve 100% height without background images is to use the following techniques. (This doesn’t work for ie5 mac and a few other minor browsers.)" for more info on this technique.

    I find it's easiest to start with the example given there and fit my page into it - rather than trying to add the 100% height to an existing page.

  3. #3
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works, but it's not exactly what I am looking for. I want the nav menu on the left to extend to the size of the right colomn. I dont need the whole page 100%. Thanks

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use Faux Columns to make the elements appear to have equal heights.
    Faux Columns
    Creating Liquid Faux Columns
    Faux Columns for Liquid Layouts
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Faux columns - Which is also covered in the FAQ that you said you read


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
  •