No replies
ospillane
Offline
newbie
Ireland
Last seen: 12 years 9 weeks ago
Ireland
Joined: 2009-02-10
Posts: 1
Points: 0

Hi All,
I know there are posts on this topic but I can't find a solution specific to my problem so I'm going to post.
In my code below, my page is split into four sections (topleft, topright, bottomleft and bottomright). The topleft div has dynamic content so I'll never be able to set a specific height to it as it needs to be auto. The topright div needs to stretch to match the height of topleft but I can't get this to work. I've done research and I understand the problem is it takes its height from its parent (topcontainer) etc but if I set the height of the parent or the topright div to be 100% it stretches the whole page and the bottom divs are pushed way down.
I have also tried to use the 'expression' feature but couldn't get it working and from what I've read it seems a bit unstable.
I know this is a well know problem but surely in this day and age there is some way for me to achieve what I need.

Any help is much appreciated Wink

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
 
<body style="height:100%; min-height:100%;">
 
<style type="text/css">
	div#contentHomepageContainer { padding:0px 0px 0px 20px; float:left; width:768px; height:100%; min-height:100%;}
 
	div#topleft {float:left; width:49%;}
	div#topright {float:right; width:49%; }
 
	div#bottomleft {float:left; width:49%; height:100%; min-height:100%;}
	div#bottomright {float:right; width:49%; height:100%; min-height:100%;}
 
	.space-line { clear: both; margin: 0; padding: 0; width: auto; height:10px; }
</style>
 
 
 
	<div id="contentHomepageContainer" style="border:#FF0000 1px solid;">
		<div id="topcontainer">
			<div id="topleft" style="border:#00FF00 1px solid;">
				top left<br /><br />
				Content in here is dynamic so<Br />height of this div<br />needs to be auto
			</div>
			<div id="topright" style="border:#00FF00 1px solid;">
				top right - this box needs to be the same height as the one to its left.
			</div>
		</div>
 
		<div class="space-line"></div>
 
		<div id="bottomleft" style="border:#00FF00 1px solid;">bottom left</div>
		<div id="bottomright" style="border:#00FF00 1px solid;">bottom right</div>
	</div> 
 
 
</body>
</html>