asked on

Set div height from another div

How do you CSS/html-gurus handle the common scenario with two divs beside each other where one div should have at least the same height as the other (for a balanced look);

Pseudo-code:
If maincontent.height < sidebarcontent.height Then maincontent.height=sidebarcontent.height

Is it impossible, and I should add content just below maincontent wherever it ends?

Regards
Jonas

Nenad Rajsic

Hi Jonas
can you not just put both divs in a container and specify height 100%?
if you post your code and explain your problem we might be able to give you a more detailed advice

vb_jonas

ASKER

Hi

I have a

<div id="pagecontent">
<div id="maincontent" style="float:left;width:700px;"> ... dynamic content from article ... </div>
<div id="sidebarcontent" style="float:left;width:300px;"> ... dynamic content from functions like navigation ... </div>
</div>
<div id="footer" style="width:700px;"> ... footer content ... </div>

The whole page has a nice photo background, but maincontent and sidebarcontent has white background. All content is dynamic and impossible to know the height. I want the maincontent white background to fill up to the height of sidebarcontent, when it's lower. When its higher it should have it's height.

Possible?

Thanks!

Kyle Hamilton

I haven't tested this on IE, but maybe you can try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>...</title>
		 

<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRt #sidebar1 { padding: 0px; margin: 0px; width: 208px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRt #sidebar1 { padding: 10px; margin-left: -3px; width: 188px; }
.twoColFixRt #mainContent { zoom: 1; }

/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */


</style>
<![endif]-->
<style type="text/css">
body  {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	font-size:11px;
	line-height:14px;
}
.mylayout #container { 
	width: 46em;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #000;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height:100&;
	
}

.mylayout #mainContent { 
/* margin: 0px 208px 0px 0px; 	 the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	margin:0px;
	padding: 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */

} 


.mylayout #sidebar1 {
	float: right; /* since this element is floated, a width must be given */
	width: 12em; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 10px;
	height:100%;
}

#sidebar1 h3, .twoCol #sidebar1 p {
        margin-left: 10px; 
        margin-right: 10px;
}



.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
}
/* end layout */







</style>





</head>

<body  class="mylayout">

<div id="container">
  <div id="sidebar1">
  
  </div><!-- end #sidebar -->
  <div id="mainContent">
  
    
      
</div><!-- end #mainContent -->
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- end #container --></div>
  




</body>
</html>

Open in new window

s8web

In my opinion, the easiest way to go about this is the use of a repeating background image on your pagecontent div that gives the appearance of columns. This method is commonly referred to as faux columns. There isn't a pure css way of getting this accomplished. You can do it pro grammatically with all server languages, but a <1k image works all the same and is much less involving. Take a look at the zip file (the color choice is just for demonstration purposes).
ee.zip

Kyle Hamilton

s8web, It's great if you know how much content you have and how much space it will take up. But if your content goes below the min-height it doesn't work.

s8web

kozaiwaniec,

I think you're confused. min-height means that if there's not enough content to extend the page to x, extend the page to the amount specified. It's especially useful if you don't know if there will be enough content to provide for a comfortable page length.

s8web

I usually lay pages out in a manner that avoids the necessity of min-height, but without seeing the page that this snippet resides in, min-height is a safe bet.

Jonas:
With that said, I might be able to provide a better solution if you link to the page in question.

Kyle Hamilton

I understand min-height. Maybe a better way of saying what I meant would be : if the content exceeds 400 px, the background image doesn't extend with it. But don't get me wrong, I really like the concept. Especially when there is very little content and otherwise, the page ends up being 100 px high, yuck.

Cheers

s8web

Which background image are you talking about? Unless you're using ie6 the background extends with the extra content. In ie6, you have to use height instead of min-height. You can *html #elementname{} to target ie6. I stopped supporting ie6 though. It's a ten year old browser that's two versions in legacy now.

Kyle Hamilton

I'm talking about the Faux columns img. OK, sorry, I haven't had a chance to look at it on a PC before (where it does work, but it doesn't in any of the MAC browsers. 5% of users use MACs, so I guess it's not that big a deal. I always try to make everything work on both platforms, unless it it absolutely impossible. But I agree, about ie6. Oh well...

ASKER CERTIFIED SOLUTION

s8web

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kyle Hamilton

Cool. I'm definitely going to put this one in my resources.

Gary

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.