SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    UK
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    height inheritance

    I am trying to build a 3 column layout as follows:

    I have a single parent div which I want to grow (in height) as large as the tallest child div. There are 3 child divs each of a fixed width. I want the child divs to automatically grow in height to match that of their parent.

    Is such a thing possible?

    PS. I should add I would like the parent div to have a minimum height.

  2. #2
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your statement contradicts it's self you want a child to grow to the height of the parent and you want the parent to be the height of the heighest column...

    try this

    set your parent div to have a height 100%

    within your parent div have 3 child divs 1 float left 1 float right and set the other to have margins=the width of the columns floated (set the height of all 3 children to 100%),

    this will cause the child div to be 100% the height of the parent div, which will be 100% the height of the browser...

    you could also set the parents height to auto which would cause it to be sized by its children, if auto is applied to the child divs they would themselves be sized by their content.

    i wouldnt rely on min height as (if im right in thinking..correct me if i'm wrong) but ie6 and previous dont use min width.

    RATHER
    make a stop div 1 px wide with the same bgcolour, no borders (so invisable) and put it in your columns.
    give this div a height equal to the smallest you want your column to be
    it will stop the columns vertical fluidity when it reaches the same size as your stop div

    hope that makes sence and i hope it helps

  3. #3
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    UK
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help ... I don't think my requirements do contradict themselves but I undoubtedly was unclear in my explanation.

    I want to force all child divs and the parent div to be as big (height) as the tallest child div (and never be smaller than the minimum).

  4. #4
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok set your parent to auto and your columns to 100%
    you can then apply a min-width / stop div as your require

  5. #5
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    UK
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by james_littler View Post
    ok set your parent to auto and your columns to 100%
    you can then apply a min-width / stop div as your require
    This doesn't really work. With this configuration the parent grows with the size of the largest child but the other child divs do not grow too.

  6. #6
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    UK
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In fact, it appears that any child divs set to height:auto expand to the size of the page.

    My difficulty is illustrated here. The left, red column is set to height:100% and grows as big as the page. The right, blue column is set to height:auto and grows only as big as the text it contains.

    I need the column with the greatest content to set the height of the div and the smaller child divs to grow with it.
    Last edited by Azaar; Aug 29, 2007 at 14:44. Reason: missed out the link

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you looking for something like this?

    http://battletech.hopto.org/html_tut.../template.html

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

    No div's never follow each other in height, you can only fake it

    1 make the background color of wrapper and columns the same
    2 faux columns
    3 borders negative margin model
    4 eXtended columns
    5 content controlled height negative margin model
    6 position absolute that follow the wrapper , but not each , (real columns not fakes, IE < 7 can be used)

    Content controlled height negative margin model,
    Disadvantage are they need mark-up HTML (usually one additional div per column) and the margin parameters are connected with column width's
    With more then 3 columns they can get confusing to work with , thats why they don't sell that well
    PS was a test, for adding a border
    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&#37;;background:#a2a2a2;}
    	
    	body i{color:#909090;}
    	
    	div{font-size:1em;}
    	
    	head+/* */body .fc:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    	}
    	
    	.wrapper{background:#909090;}
    	
    	.wrapper,.footer{border:1px solid #000000;}
    	
    	.w{width:64em;margin:.5em auto 0 auto;}
    	.wx{width:90%;}
    	
    	.header{background:#ff8c00;border-bottom:1px solid #000000;}
    	
    	.navigation,.footer{background:#fbfbfb;}
    	
    	.bo{border-bottom:1px solid #000000;}
    	
    	.aur{background:#d8d8d8;border-right:1px solid #000000;margin:0 18em 0 0;}
    	
    	.aul{background:#b7b7b7;border-left:1px solid #000000;margin:0 0 0 18em;}
    	
    	.left,.right{position:relative;width:18.01em;}
    	.left{margin:0 0 0 -18em;float:left;/*left:-100%;*/}
    	.right{margin:0 -18em 0 0;float:right;}
    	
    	.center{width:100%;float:left;}
    	head+/* */body .center{width:99.9%;}
    	
    	.footer{border-top:none;margin:0 auto;}
    	
    	.wrapper h1,.wrapper p,.footer p{padding:5px;}
    	
    	.wrapper a:hover{padding:0 0 15em 0;display:block;}
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	* html .fc{height:1%;} /* IE 5 5.5 6 haslayout */
    	*:first-child+html .fc{zoom:1;} /* IE 7 haslayout */
    	</style>
    	<![endif]-->
    </head>
    <body>
    <div class="wrapper w">
    
    <div class="header bo">
    <h1>header</h1>
    <p>Basic 3 Column Bare</p>
    </div>
    <div class="navigation bo">
    <p>navigation</p>
    </div>
    
    <div class="aur">
    <div class="aul fc">
    
    <div class="left">
    <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="center">
    <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="right">
    <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>
    
    <div class="footer w"><p>footer</p></div>
    
    </body>
    </html>
    Absolute, real columns that follow one, the main container , no floats easy to implement ,workable in IE < 7
    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{height:100%;}
    	
    	*{padding:0;margin:0;}
    	
    	body{
    	background:#ccccff;
    	font-size:.76em;
    	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
    	}
    	
    	div,h1,h2{font-size:1em;}
    	
    	.ab,.left,.right{position:absolute;top:0;}
    	
    	.ab{
    	left:0;
    	width:100%;
    	background:#ccccff;
    	}
    	
    	.header,.footer{height:8em}
    	
    	.header{background:#ffcccc;text-align:right;}
    	
    	.middle{
    	position:relative;
    	background:#ffccff;
    	text-align:right;
    	min-height:100%;
    	margin:-8em 10em 0 10em;
    	}
    	
    	.left,.right{width:10em;top:8em;bottom:0;}
    	
    	.left{
    	background:#ffcc99 url(http://www.google.nl/images/firefox/fox1.gif) bottom left no-repeat;
    	left:-10em;
    	}
    	
    	.right{
    	background:#cccc99 url(http://www.google.nl/images/firefox/fox1.gif) bottom right no-repeat;
    	right:-10em;
    	}
    	
    	.footer{
    	background:#cccccc;
    	}
    	
    	p{padding:.2em .5em .2em .5em;}
    	
    	.middle h1{padding:.2em .5em .2em .5em;border-top:16em solid #000000;}
    	.left h2,.right h2{padding:.2em .5em .2em .5em;border-top:8em solid #000000;}
    	
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	* html .middle{height:100%;}
    	* html .left,* html .right{height:100%;}
    	* html .footer,* html .header,* html .middle{position:relative;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    
    
    <div class="middle">
    <h1>content</h1>
    <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 />
     -->
    end
    </p>
    <div class="left">
    <h2>content</h2>
    <p>left end</p>
    </div>
    <div class="right">
    <h2>content</h2>
    <p>right end</p>
    </div>
    </div>
    
    <div class="footer"><p>footer</p></div>
    
    <!-- -->
    <div class="ab">
    <div class="header"><p>header</p>
    </div>
    </div>
    
    
    </body>
    </html>
    Last edited by all4nerds; Aug 30, 2007 at 06:40.


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
  •