SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: depending divs

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Estonia
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    depending divs

    How to make two or more divs, that are side by side, depend from each other?

    So that when one div stretches longer then other ones would follow.

    I have serached the google and found other people who have the same problem, but there's no solution.

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

    PIE
    http://positioniseverything.net/arti...ut/equalheight

    3 column eXtended
    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*/
    	height:100%;
    	width:100%;
    	}
    	
    	*{margin:0;padding:0;}
    	
    	body{font-size:75%;background:#eeeeee;}
    	
    	div,p,h1{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:1em;
    	color:#000000;
    	text-align:left;/* to get text back to the left*/
    	}
    	
    	.wra{
    	margin:-90px auto 0 auto;
    	}
    	head+body .wra{min-height:100%;overflow:hidden;}
    	* html .wra{height:100%;}
    	
    	.he{height:90px;background:#B5B5B5;}
    	
    	.l,.ll{width:200px;}
    	.l{float:left;background:#FF00FF;}
    	.ll{float:right;background:green;}
    	
    	.r{float:left;background:#ffffff;width:100%;}
    	
    	.x{height:90px;}
    	
    	.fo{height:90px;background:#ffff00;margin:0 auto;}
    	
    	.bgr{background: url('sd.jpg') repeat-y top right;}
    	
    	.wra .l p,.wra .ll p,.fo p,.he p,* html .r p{padding:.3em .5em .2em .5em;}
    	head+body .r p{padding:.3em 205px .2em 205px;}
    	.wra h1{padding:.3em;}
    	
    	head+body .wra:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    	
    	.ex{padding:0 0 32767px 0;margin:0 0 -32767px 0;}
    	
    	.w{ /* width:64em;*/}
    	* html body .h{/*height:64em;*/}
    	head+body .h{/*min-height:64em;*/}
    	</style>
    	<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:0 0 0 0;margin:0 0 0 0;}</style>');
    	</script>
    </head>
    <body>
    
    <div class="wra w h">
    <div class="x"></div>
    <div class="he">
    <h1>Basic 3 column, V2 eXtended</h1>
    <p>&nbsp;</p>
    </div>
    
    <div class="r ex">
    <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="ll 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>
    
    <p>middle
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><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>
    divs divs and more divs
    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:63.2em;border:1px solid #000000;}
    	
    	head+body .wra{width:63.2em;overflow:hidden;}
    	head+body .wra{min-height:2em;}
    	
    	.he,.fo{width:100%;}
    	.fo{border-top:1px solid #000000;}
    	.wra{border-top:1px solid #000000;}
    	.ex{border-left:1px solid #000000;}
    	.nx{border-left:none;}
    	
    	.td{float:left;width:21em;}
    	.tx{float:left;width:10.4em;}
    	.ty{float:left;width:5.15em;}
    	.tz{float:left;width:6.8em;}
    	
    	.ca{background:#ccffff;}
    	.cb{background:#ccffcc;}
    	.cc{background:#ffffcc;}
    	
    	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/*,head+body .con:after,head+body .conx:after,head+body .con3:after*/{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    	.he p,.fo p,.wra p{padding:.5em .3em 1em .3em;margin:0;}
    
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	* html .ex{padding:0 0 32767px 0;margin:0 0 -32767px 0;}
    	* html .wra{height:2em;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    
    <div class="au mt">
    
    <div class="he cc"><p>div table</p></div>
    
    <div class="wra">
    
    <div class="td ca ex nx">
    <div class="tx ca ex nx">
    <div class="ty ca ex nx"><p>1a<br />end</p></div>
    <div class="ty cb ex"><p>1a<br /><br /><br />end</p></div></div>
    <div class="tx cc ex"><p>1b<br /><br /><br /><br /><br /><br />end</p></div>
    </div>
    
    <div class="td cb ex">
    <p>2endend</p>
    </div>
    
    <div class="td cc ex">
    <div class="tz ca ex nx"><p>3a<br /><br /><br /><br /><br /><br />end</p></div>
    <div class="tz cb ex"><p>3b<br /><br /><br />end</p></div>
    <div class="tz cc ex"><p>3c<br /><br />end</p></div>
    </div>
    
    </div>
    
    <div class="wra">
    
    <div class="td cb ex nx">
    <p>1<br /><br />end</p>
    </div>
    
    <div class="td cc ex">
    
    <div class="tx ca ex nx">
    <div class="ty ca ex nx"><p>1aend</p></div>
    <div class="ty cc ex"><p>1a<br /><br />end</p></div></div>
    <div class="ty ca ex"><p>1b<br /><br /><br /><br />end</p></div>
    <div class="ty cc ex"><p>1b<br /><br /><br /><br /><br /><br />end</p></div>
    </div>
    
    <div class="td ca ex">
    <div class="tx ca ex nx"><p>3<br /><br />end</p></div>
    <div class="tx cb ex"><p>3b<br /><br /><br /><br />end</p></div>
    </div>
    
    </div>
    
    <div class="wra">
    
    <div class="td ca ex nx">
    <p>1end</p>
    </div>
    
    <div class="td ca ex">
    <div class="tx cb ex nx"><p>3<br /><br />end</p></div>
    <div class="tx ca ex"><p>3b<br /><br />end</p></div>
    </div>
    
    <div class="td cc ex">
    <p>3<br /><br /><br /><br />end</p>
    </div>
    
    </div>
    
    <div class="wra">
    
    <div class="td ca ex nx">
    <div class="tx cc ex nx"><p>1end</p></div>
    <div class="tx cb ex"><p>1bend</p></div>
    </div>
    
    <div class="td cc ex">
    <p>2end</p>
    </div>
    
    <div class="td ca ex">
    <p>3end</p>
    </div>
    
    </div>
    
    <div class="fo cc"><p>div table</p></div>
    
    </div>
    </body>
    
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, That's awsome... Good Work . Never knew how to do that before, gonna use it on my new website design


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
  •