SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Match height of 2 divs

    Greetings, I have 2 div's for a 2-column layout
    Code:
    <div id="Left" style="width:100px; float:left;">Left Content</div>
    <div id="Right" style="width:100px; float:right;">RightContent</div>
    Let's say that I got a bunch of content in one of the divs while the other one doesn't, is there a way that I can have the height of the div with less content match the hight of the longer div? Thanks.

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

    borders
    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">
    	* {margin:0;padding:0;}
    	
    	head+/**/body .fc:after{
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    	}
    	
    	/*  \*/
    	* html .fc{height:1%;}
    	*+html .fc{zoom:1;}
    	/*  */
    	
    	.wra{background:#ffffcc;border-left:100px solid #ff6600;border-right:100px solid #ffff00;}
    	
    	
    	.left,.right{width:100px;position:relative;}
    	.left{float:left;margin-left:-100px;}
    	.right{float:right;margin-right:-100px;}
    	
    	p{padding:5px;}
    	</style>
    </head>
    <body>
    
    <div class="wra fc">
    
    <div class="left">
    <p>
    Left 
    <!--  -->
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    
    Content
    </p>
    </div>
    
    <div class="right">
    <p>
    Right
    <!--  -->
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    
    Content
    </p>
    </div>
    12345
    </div>
    
    </body>
    </html>
    PIE way
    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">
    	* {margin:0;padding:0;}
    	
    	head+/**/body .fc:after{
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    	}
    	
    	/*  \*/
    	* html .fc{height:1%;}
    	*+html .fc{zoom:1;}
    	/*  */
    	
    	.wra{background:#ffffcc;}
    	head+body .wra{overflow:hidden;}
    	
    	.ex{padding:0 0 32767px 0;margin:0 0 -32767px 0;}
    	
    	.left,.right{width:100px;}
    	.left{float:left;background:#ff6600;}
    	.right{float:right;background:#ffff00;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <div class="wra fc">
    
    <div class="left ex">
    <p>
    Left 
    <!--  -->
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    
    Content
    </p>
    </div>
    
    <div class="right ex">
    <p>
    Right
    <!--  -->
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    
    Content
    </p>
    </div>
    
    </div>
    </body>
    </html>
    Last edited by all4nerds; Jun 24, 2006 at 05:25.

  3. #3

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

    Faux columns , a bgr image repeat-y

  5. #5
    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)
    or a table

  6. #6
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    display: table-cell;

  8. #8
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    too many options here Thanks you all.


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
  •