SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    Nottingham UK
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% height woes :(

    hi there,

    i have a main container, which contains 2 floated divs - one left - one right.

    the left is a nav bar and the right the content area. The page is centred and 760px wide so iirc the body background hack cant be used.

    i've tried and tried again to get both of them the same height and span to total height of the main container with no joy. i've searched google and this forum and still no joy!

    anyone got any tips or solutions?

    Thanks.

    Jonathan.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This question is asked daily

    The easiest way is to use a background image on the main container to imitate a column.
    http://www.pmob.co.uk/temp/2colblog.htm

    Or my more complicated method of negative margins that doesn't need an image.
    http://www.pmob.co.uk/temp/2column_simple_1.htm

    Or the new PIE method:
    http://www.positioniseverything.net/...ut/equalheight

    Or look at the 3 col demo sticky thread for more ideas

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

    Discounts at the 100% height weeks ?

    I am just working on the basic 2 models

    here is a dirty way, only draw back is that the content box must always be longer PS not for Opera
    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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	margin:0;/* no margins body */
    	padding:0;/* no padding body */
    	}
    	
    	*{margin:0;padding:0;}
    	
    	body{font-size:75%;background:#a2a2a2;}
    	
    	div,p{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:1em;
    	color:#000000;
    	margin:0em;
    	padding:0em;
    	text-align:left;/* to get text back to the left*/
    	}
    	
    	.wra{
    	margin:0 auto;
    	background:#cccccc url(_bgr/xx.gif) no-repeat 0px 100%;
    	}
    	
    	.mt{margin-top:.5em;}
    	
    	.w{width:64em;}
    	
    	.he{background:#ff8c00;height:8em;}
    	
    	.na{background:#fbfbfb;height:2.5em;}
    	
    	.l{float:left;width:18em;}
    	
    	.ll{float:left;width:46em;background:#d8d8d8 url(_bgr/xx.gif) no-repeat bottom right;}
    	
    	.fo{background:#fbfbfb;margin:0 auto;height:2.5em;}
    	
    	.wra p,.fo p{padding:.5em .5em 0 .5em;}
    	.wra h1{padding:.3em;font-size:1.5em;}
    	
    	head+body .wra:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    	
    	.wra a{color:#0000ff;text-decoration:underline;}
    	
    	html,body{height:100%;width:100%;}
    	
    	.wra{margin:-3em auto 0 auto;}
    	
    	head+body .wra{min-height:100%;overflow:hidden;}
    	* html .wra{height:100%;}
    
    	head+body .ll,head+body .l{min-height:100%;margin:-14em 0 0 0;}
    	* html .ll,* html .l{height:100%;margin:-14em 0 0 0;}
    	
    	.x{height:3.5em;background:#a2a2a2;}
    	head+body .xx{height:14em;background:#a2a2a2;}
    	* html .xx{height:14em;background:#a2a2a2;}
    	
    	.r{position:relative;z-index:100;}
    	
    	.q{margin-top:14em;}
    	</style>
    
    </head>
    <body>
    
    <div class="wra w">
    <div class="x"></div>
    <div class="he r">
    <h1>header</h1>
    <p>Basic 2 column without borders<br /><br /></p>
    </div>
    
    <div class="na r"><p>nav</p></div>
    
    <div class="l">
    <div class="xx"></div>
    <p>left 
    <!-- 
    <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 />
    <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="ll">
    <div class="xx"></div>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 7.2 8 / Moz 1.7 1.8 / OP 7.54 </p>
    <p><a href="lay1-no.htm">Back</a></p>
    <p>left 
    <!-- 
    <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 />
    <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 class="fo w"><p>footer</p></div>
    </body>
    </html>
    PIE way, if you need a header or footer it gets a little more complicated
    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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	margin:0;/* no margins body */
    	padding:0;/* no padding body */
    	height:100%;
    	width:100%;
    	}
    	
    	*{margin:0;padding:0;}
    	
    	body{font-size:75%;background:#f0f0f0;}
    	
    	div,p{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:1em;
    	color:#000000;
    	margin:0em;
    	padding:0em;
    	text-align:left;/* to get text back to the left*/
    	}
    	
    	.wra{margin:0em auto 0 auto;}
    	
    	head+body .wra{min-height:100%;overflow:hidden;}
    	* html .wra{height:100%;}
    	
    	.l{float:left;background:#ff8c00;width:18em;}
    	
    	.r{float:left;width:46em;background:#d9d9d9;}
    	* html .r{width:46em;}
    	
    	.wra p,.fo p{padding:.5em .5em 0 .5em;}
    	.wra h1{padding:.3em;font-size:1.5em;}
    	
    	head+body .ex:after{
    	content: ".";
    	display:block;
    	background:inherit;
    	height:0;
    	margin-bottom:-32767px;
    	padding-top:32767px;
    	}
    	
    	head+body .wra:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility:hidden;
    	}
    	
    	.w{width:64em;/*  */}
    	* html body .h{/*height:64em;*/}
    	head+body .h{/*min-height:64em;*/}
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	* html .ex{padding:0 0 32767px 0;margin:0 0 -32767px 0;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    
    <div class="wra w h">
    
    <div class="l ex">
    <p>left
    <!-- 
    <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 />
    <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 ex">
    <p>right
    <!-- 
    <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 />
    <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>
    </body>
    </html>


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
  •