SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict next2heaven's Avatar
    Join Date
    Apr 2005
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Same column heights?

    When you have a two column layout, how can you get the left column (which will always be smaller) to stretch to the height of the right column? The right column is dynamic so I can't specify a height for it.

    The layout is in this basic format:

    <div id="wrapper">
    <div id="col1">Column 1</div>
    <div id="col2">Column 2</div>
    </div>

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Javascript. But you probably don't really need them to be the same height, just to look like they are: Faux Columns.

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

    eXtended columns
    http://www.positioniseverything.net/...ut/equalheight

    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 */
    	}
    	
    	*{padding:0;margin:0;}
    	
    	body{font-size:75%;}
    	
    	div{font-size:1em;}
    
    	/* general */
    	p,span,b,a,pre,hr{
    	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*/
    	}
    	
    	.au{margin:1em auto;width:64.2em;border:1px solid #000000;}
    	.au{border-top:none;}
    	
    	
    	head+body .wra{width:64.1em;overflow:hidden;}
    	head+body .wra{min-height:4em;}
    	* html .wra{height:4em;}
    	
    
    	.wra{border-top:1px solid #000000;}
    	.ex{border-left:1px solid #000000;}
    	.nx{border-left:none;}
    	
    	.con{float:left;width:20em;}
    	.cox{float:left;width:44em;}
    	
    	.ca{background:#ccffff;}
    	.cb{background:#ccffcc;}
    	
    	head+body .ex:after{
    	content: ".";
    	display:block;
    	background:inherit;
    	height:0;
    	margin-bottom:-32767px;
    	padding-top:32767px;
    	border-left:1px solid #000000;
    	margin-left:-1px;
    	}
    	head+body .wra:after{
    	content:".";
    	display:block;
    	height:0;
    	clear:both;
    	visibility:hidden;
    	}
    	.he p,.fo p,.con p,.cox p{padding:.5em .3em 1em .3em;margin:0;}
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	* html .ex{padding-bottom:32767px;margin-bottom:-32767px;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    
    <div class="au mt">
    
    
    <div class="wra">
    
    <div class="con ca ex nx">
    <p>1<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
    </div>
    
    <div class="cox cb ex">
    <p>2</p>
    </div>
    
    </div>
    
    
    </div>
    
    </body>
    </html>
    content first
    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>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<title>Basic 3 Column, eXtended V8 special, Content First 2, 100% Hight, no wrapper</title>
    	<!--[if IE]>
    	<style type="text/css">
    	* html div,* html p,* html h1,* html h2,* html span{height:1%;} /* has layout fix IE */
    	</style>
    	<![endif]-->
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	height:100%;
    	width:100%;
    	}
    	
    	*{padding:0;margin:0;}
    	
    	body{font-size:75%;background:#eeeeee;}
    	head+body{min-width:64em;}
    	
    	div{font-size:1em;}
    	
    	p,h1,h2,a{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:1em;
    	color:#000000;
    	text-align:left;/* to get text back to the left*/
    	}
    	a{text-decoration:underline;}
    	
    	.wra{margin:0 0 -10em 0;}
    	head+body .wra{min-height:100%;overflow:hidden;}
    	* html .wra{height:100%;}
    	
    	.au{padding:0 15em 0 18em;}
    	
    	.l,.ll,.r{text-align:justify;float:left;margin:10em 0 0 0;}
    	head+body .ex{position:relative;}
    	
    	.l{background:#66F url(_bgr/xx.gif) top right repeat-y;width:18em;right:18em;margin-left:-100%;}
    	
    	.l p,.l h2,.ll p,.ll h2,.r p,.r h1,.he p,.fo p{padding:.5em .5em;}
    	/* html .l{left:15em;}*/
    	* html .l{padding-left:15em;}
    	.ll{background:#F66 url(_bgr/xx.gif) top left no-repeat ;width:15em;margin-right:-100%;}
    	.r{background:#DDD url(_bgr/xx.gif) top right repeat-y;width:100%;}
    	
    	.ex{padding-bottom:1001em;margin-bottom:-1000em;}
    	
    	.he,.fo{height:10em;background:#999;width:100%;}
    	.he{margin:0 0 0 0;position:absolute;left:0;top:0;z-index:100;}
    	
    	.fo{position:relative;}
    	
    	head+body .wra:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear:both; 
    	visibility: hidden;
    	}
    	.l p,.ll p,.l h2,.ll h2{color:#ffffff;}
    	
    		
    	.x{height:8em;background:#ff6600;}
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	body{width:expression(documentElement.clientWidth <770 ?(documentElement.clientWidth==0 ?(body.clientWidth<770 ? "770":"auto"):"770px"):"auto");}
    	</style><![endif]-->
    		<script type="text/javascript">
    	function is(){
    	agent = navigator.userAgent.toLowerCase();
    	this.o8 = (agent.indexOf("opera 8") != -1);
    	}
    	var is = new is();
    	if (is.o8) //alert("Opera8") +
    	document.write('<style type="text/css">head+body .ex:after{content: ".";display:block;background:inherit;height:0;margin-bottom:-32767px;padding-top:32767px;}.ex{padding-bottom:0;margin-bottom:0;}</style>');
    	</script>
    </head>
    
    <body>
    
    <div class="au wra">
    
    <div class="r ex">
    <h1>Main content.</h1>
    <p><a href="V8.htm">Back</a></p>
    <p>center
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><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>
    <p class="x">&nbsp;</p>
    </div>
    
    <div class="l ex">
    <h2>Left sidebar.</h2>
    <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>
    <p class="x">&nbsp;</p>
    </div>
    
    <div class="ll ex">
    <h2>Right sidebar.</h2>
    <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>
    <p class="x">&nbsp;</p>
    </div>
    
    </div>
    
    <div class="fo"><p>This is the footer.</p></div>
    
    <div class="he"><p>Basic 3 Column, eXtended V8 special, Content First 2, 100% Height</p></div>
    </body>
    </html>

  4. #4
    SitePoint Addict next2heaven's Avatar
    Join Date
    Apr 2005
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Buddy, I used that example but it's crazy...I don't understand how when you have a wrapper that the wrapper doesn't extend down to the lowest div inside it? Is that wrong thinking? I'm using the background image idea but it just doesn't work in Firefox...does in IE though.

  5. #5
    SitePoint Addict next2heaven's Avatar
    Join Date
    Apr 2005
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay...check this out:

    http://www.projectseven.com/tutorials/css/pvii_columns/

    I like this...works great!

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

    Buddy's example is the most ezy, if the faux column is not on the wrapper something else is wrong, like clearing floats ?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I like this...works great!
    Doesn't work for me as I have javascript disabled in some of my browsers (just to be awkward)

    As already mentioned abov ethe faux columns is simple and works everywhere. If you can't make it work then your chances of making a javascript solution work would seem slim by comparaison

    The concept is simple as the image is repeated on the parent and as long as floats are cleared then the parwent will sttrectch with the content. If you have the code that doesn't work for you then post it and someone will put it right for you


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
  •