SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Firefox Height problem

    I have a 2 col layout on my site.
    The left column always has content and has height set to auto.
    On some pages the right column has only little or no content. SO I get an empty area without any color.
    The background color does not stretch to the same height of the left column.
    How do I solve this?
    Any help is greatly appreciated. Thanks.
    **I looked at the forums and am confused with 100% height setting - not sure whether this is what I want. I tried with HTML {height:100%} but the column stretched even below the left
    I have also tried coloring the wrapper and body with the right col's background color, but nothing positive happened.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    2 wrapper, negative margin model

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>12345 12345 12345 12345 12345</title>
    	<style type="text/css">
    	
    	* {margin:0;padding:0}
    	
    	body{font-size:75%;background:#a2a2a2;}
    	
    	body i{color:#909090;}
    	
    	div{font-size:1em;}
    	
    	head+/**/body .fc:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    	}
    	/* \*/
    	* html .fc{height:1%;}
    	*+html .fc{display:inline-block;}
    	/*  */
    	
    	.wra{background:#909090;}
    	
    	.wra,.fo{border:1px solid #000000;}
    	
    	.w{width:64em;margin:.5em auto 0 auto;}
    	
    	.he{background:#ff8c00;border-bottom:1px solid #000000;}
    	
    	.na,.fo{background:#fbfbfb;}
    	
    	.bo{border-bottom:1px solid #000000;}
    	
    	.aul{background:#b7b7b7;border-left:1px solid #000000;}
    
    	.aul{margin:0 0 0 18em;}
    	.l{margin:0 0 0 -18em;
    	position:relative;
    	width:18.01em;
    	float:left;
    	}
    	
    	.r{width:100%;float:left;}
    	head+/**/body .r{width:99.9%;}
    	
    	.fo{border-top:none;margin:0 auto;}
    	
    	.wra h1,.wra p,.fo p{padding:5px;}
    	
    	</style>
    </head>
    <body>
    <div class="wra w">
    
    <div class="he bo">
    <h1>header</h1>
    <p>Basic 2 Column Bare</p>
    </div>
    <div class="na bo">
    <p>navigation</p>
    </div>
    
    <div class="aul fc">
    
    <div class="l">
    <p>
    start
    
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <!-- <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p>
    </div>
    
    <div class="r">
    <p>
    start
    
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <!-- <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p>
    </div>
    
    </div>
    
    </div>
    
    <div class="fo w"><p>footer</p></div>
    
    <p><i>&nbsp;&copy; b. bakker</i></p>
    
    </body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.
    Let me take a look.


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
  •