dynamically sizing columns according to content

2 column layout using CSS/Javascript/HTML, attempting to size both col

Page 1 of 1

3 Replies - 2112 Views - Last Post: 19 September 2007 - 02:59 AM

#1 devinmcmanus  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 17-September 07

dynamically sizing columns according to content

Posted 17 September 2007 - 06:07 PM

I have a 2 column layout in CSS/Javascript/HTML that I'm trying to size dynamically according to content (on the real site content is pulled from a MySQL database using PHP). Trouble is, when I look at this page in a browser only the column on the left is sized properly. Can anybody help with this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="user1234">

	<title>Untitled 1</title>
	<script type="text/javascript">
	function resizeCols()
	{
		var leftcol = document.getElementById("leftcol");
		var contact = document.getElementById("contact");
		var content = document.getElementById("content");
		var maxHt = 0;
		
		if(contact && content)
		{
			maxHt = Math.max((contact.scrollHeight + leftcol.scrollHeight), content.scrollHeight);
			contact.style.height = maxHt + "px";
			content.style.height = maxHt + "px";
		}
	}
	</script>
	<style>
	#leftcol {
		position:absolute;
		left:0px;
		top:37px;
		width:118px;
		height:394px;
		background-color:#D9D3BB;
		border-right:3px solid #FFFFFF;
	}
	
	#content {
		position:absolute;
		left:121px;
		top:47px;
		width:366px;
		height:741px;
		border-right:3px solid #FFFFFF;
		border-bottom:5px solid #333028;
	}
	
	#contact
	{
		position:absolute;
		left:0px;
		top:394px;
		width:118px;
		height:394px;
		background-color:#D9D3BB;
		border-right:3px solid #FFFFFF;
		border-bottom:5px solid #333028;
	}	
	</style>	
</head>

<body onload="resizeCols();">
<div id="leftcol">
</div>
<div id="contact">
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sit amet purus. Curabitur augue magna, volutpat sed, convallis nec, posuere nec, odio. Curabitur et arcu. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sagittis dolor ac leo. Donec interdum metus quis turpis. Vestibulum lorem leo, elementum non, sagittis eu, lacinia quis, lacus. Proin dapibus turpis sed odio ultricies auctor. Donec eget arcu vel magna imperdiet gravida. Etiam consequat rutrum mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In euismod. Quisque tincidunt eros nec quam. Ut dignissim magna a pede. In ac orci. Nullam faucibus, magna sed egestas tempus, velit magna ultrices pede, vitae congue mauris lectus vel diam. Sed nisl leo, semper ac, tristique eget, tempus id, quam. Vivamus posuere.

Nam tempus. Cras posuere enim ut libero. Vivamus vel est sed dui lacinia rhoncus. Maecenas egestas. Sed lobortis congue urna. Pellentesque faucibus, est ac semper suscipit, massa tellus scelerisque arcu, eget aliquet felis elit eget ante. Vestibulum scelerisque tempor tellus. Donec arcu lorem, viverra et, gravida vel, molestie quis, tortor. Vivamus et urna sollicitudin arcu dignissim tincidunt. Nullam vehicula. Maecenas velit. Duis sagittis diam eu urna. Maecenas mauris.

Phasellus interdum, enim sit amet tempus sollicitudin, tellus massa vestibulum dui, a interdum est justo id tellus. Suspendisse pellentesque fringilla erat. In hac habitasse platea dictumst. Aliquam commodo ligula non magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dignissim diam eu lacus. Nunc et enim eu leo bibendum dictum. Aliquam consequat interdum mi. Sed massa arcu, accumsan non, condimentum at, feugiat eu, pede. Sed accumsan justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a enim congue sem tincidunt pellentesque. Vivamus pulvinar. Sed mollis condimentum dui. Vivamus tristique leo eu lectus. Vivamus laoreet neque non urna. Aenean posuere nulla vel odio. Integer ultricies metus et lorem. Phasellus lacinia interdum nisl.

Sed volutpat risus in neque. Praesent scelerisque. Vivamus est leo, eleifend eget, convallis aliquet, pulvinar porta, magna. Donec molestie. Morbi pretium sapien eu lorem. Praesent posuere viverra purus. Fusce condimentum mauris sed orci. Nullam luctus ipsum quis quam. Aliquam mi enim, dictum vitae, mattis at, faucibus vitae, ante. Sed et enim a velit pellentesque faucibus. Morbi ac diam non est ullamcorper tincidunt. Suspendisse potenti. Praesent purus. Vivamus cursus. Praesent varius metus vel urna. Curabitur vel diam eget urna ultrices lacinia. Proin vulputate.

Duis aliquet varius ipsum. Maecenas euismod nisi sit amet neque. Phasellus facilisis scelerisque leo. Aliquam lacinia lorem ac nisl. Integer feugiat augue ac metus. Donec pretium elit sit amet justo. Sed at pede. Sed vulputate tellus quis dolor. Maecenas nisl lorem, sollicitudin et, tristique vel, feugiat sit amet, ante. Curabitur vel odio a ante egestas semper. Vivamus turpis lectus, scelerisque vel, aliquet nec, dictum vel, enim. Proin sagittis porttitor turpis. Fusce porttitor porta risus. Maecenas et mauris pretium est convallis consectetuer. Aliquam tincidunt. Nunc semper iaculis odio. Donec consectetuer fermentum erat. Suspendisse potenti. Ut tristique.
</div>

</body>
</html>

Attached File(s)

  • Attached File  test.htm (4.79K)
    Number of downloads: 115


Is This A Good Question/Topic? 0
  • +

Replies To: dynamically sizing columns according to content

#2 devangnegandhi  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 40
  • Joined: 23-January 06

Re: dynamically sizing columns according to content

Posted 18 September 2007 - 01:50 AM

well i just removed position:absolute; to float:left; in your CSS to get what you wanted..... also the left col is not given a dynamically assigned height so it appears smaller....i have commented a line which on removing the comment will make it the same height as others if you like.....anyways here is the code.....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="user1234">

	<title>Untitled 1</title>
	<script type="text/javascript">
	function resizeCols()
	{
		var leftcol = document.getElementById("leftcol");
		var contact = document.getElementById("contact");
		var content = document.getElementById("content");
		var maxHt = 0;
		
		if(contact && content)
		{
			maxHt = Math.max((contact.scrollHeight + leftcol.scrollHeight), content.scrollHeight);
			contact.style.height = maxHt + "px";
			content.style.height = maxHt + "px";
			//leftcol.style.height = maxHt + "px";
		}
	}
	</script>
	<style>
	#leftcol {
		height:394px;
		float:left;
		left:0px;
		top:37px;
		width:118px;
		background-color:#D9D3BB;
		border-right:3px solid #FFFFFF;
	}
	
	#content {
		height:741px;
		float:left;
		left:121px;
		top:47px;
		width:366px;
		border-right:3px solid #FFFFFF;
		border-bottom:5px solid #333028;
	}
	
	#contact
	{
		height:394px;
		float:left;
		left:0px;
		top:394px;
		width:118px;
		background-color:#D9D3BB;
		border-right:3px solid #FFFFFF;
		border-bottom:5px solid #333028;
	}	
	</style>	
</head>

<body onload="resizeCols();">
<div id="leftcol">
</div>
<div id="contact">
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sit amet purus. Curabitur augue magna, volutpat sed, convallis nec, posuere nec, odio. Curabitur et arcu. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sagittis dolor ac leo. Donec interdum metus quis turpis. Vestibulum lorem leo, elementum non, sagittis eu, lacinia quis, lacus. Proin dapibus turpis sed odio ultricies auctor. Donec eget arcu vel magna imperdiet gravida. Etiam consequat rutrum mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In euismod. Quisque tincidunt eros nec quam. Ut dignissim magna a pede. In ac orci. Nullam faucibus, magna sed egestas tempus, velit magna ultrices pede, vitae congue mauris lectus vel diam. Sed nisl leo, semper ac, tristique eget, tempus id, quam. Vivamus posuere.

Nam tempus. Cras posuere enim ut libero. Vivamus vel est sed dui lacinia rhoncus. Maecenas egestas. Sed lobortis congue urna. Pellentesque faucibus, est ac semper suscipit, massa tellus scelerisque arcu, eget aliquet felis elit eget ante. Vestibulum scelerisque tempor tellus. Donec arcu lorem, viverra et, gravida vel, molestie quis, tortor. Vivamus et urna sollicitudin arcu dignissim tincidunt. Nullam vehicula. Maecenas velit. Duis sagittis diam eu urna. Maecenas mauris.

Phasellus interdum, enim sit amet tempus sollicitudin, tellus massa vestibulum dui, a interdum est justo id tellus. Suspendisse pellentesque fringilla erat. In hac habitasse platea dictumst. Aliquam commodo ligula non magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dignissim diam eu lacus. Nunc et enim eu leo bibendum dictum. Aliquam consequat interdum mi. Sed massa arcu, accumsan non, condimentum at, feugiat eu, pede. Sed accumsan justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a enim congue sem tincidunt pellentesque. Vivamus pulvinar. Sed mollis condimentum dui. Vivamus tristique leo eu lectus. Vivamus laoreet neque non urna. Aenean posuere nulla vel odio. Integer ultricies metus et lorem. Phasellus lacinia interdum nisl.

Sed volutpat risus in neque. Praesent scelerisque. Vivamus est leo, eleifend eget, convallis aliquet, pulvinar porta, magna. Donec molestie. Morbi pretium sapien eu lorem. Praesent posuere viverra purus. Fusce condimentum mauris sed orci. Nullam luctus ipsum quis quam. Aliquam mi enim, dictum vitae, mattis at, faucibus vitae, ante. Sed et enim a velit pellentesque faucibus. Morbi ac diam non est ullamcorper tincidunt. Suspendisse potenti. Praesent purus. Vivamus cursus. Praesent varius metus vel urna. Curabitur vel diam eget urna ultrices lacinia. Proin vulputate.

Duis aliquet varius ipsum. Maecenas euismod nisi sit amet neque. Phasellus facilisis scelerisque leo. Aliquam lacinia lorem ac nisl. Integer feugiat augue ac metus. Donec pretium elit sit amet justo. Sed at pede. Sed vulputate tellus quis dolor. Maecenas nisl lorem, sollicitudin et, tristique vel, feugiat sit amet, ante. Curabitur vel odio a ante egestas semper. Vivamus turpis lectus, scelerisque vel, aliquet nec, dictum vel, enim. Proin sagittis porttitor turpis. Fusce porttitor porta risus. Maecenas et mauris pretium est convallis consectetuer. Aliquam tincidunt. Nunc semper iaculis odio. Donec consectetuer fermentum erat. Suspendisse potenti. Ut tristique.
</div>

</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#3 devinmcmanus  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 17-September 07

Re: dynamically sizing columns according to content

Posted 18 September 2007 - 02:06 PM

Thanks a lot devangnedandhi. Now, suppose I want #leftcol and #contact to be in the same column, one on top of the other. Is there a way to do this? Also is it possible to stretch these columns so that all of the text in #content is inside of the bottom border?

Thanks,
Devin
Was This Post Helpful? 0
  • +
  • -

#4 devangnegandhi  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 40
  • Joined: 23-January 06

Re: dynamically sizing columns according to content

Posted 19 September 2007 - 02:59 AM

well i changed your code a lil to get you what you wanted..... first i made the height of contact and leftcol equal to half of the height of content...... then i enlcosed contact and leftcol element into another element called mainpage and changed the css a lot to get the final output. here is the code for it

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="user1234">

	<title>Untitled 1</title>
	<script type="text/javascript">
	function resizeCols()
	{
		var leftcol = document.getElementById("leftcol");
		var contact = document.getElementById("contact");
		var content = document.getElementById("content");
		var maxHt = 0;
		
		if(contact && content)
		{
			maxHt = Math.max((contact.scrollHeight + leftcol.scrollHeight), content.scrollHeight);
			contact.style.height = maxHt/2 + "px";
			content.style.height = maxHt + "px";
			leftcol.style.height = maxHt/2 + "px";
		}
	}
	</script>
	<style>
	#mainpage
	{
		width:118px;
		float:left;
	}
	#leftcol {
		float:left;
		width:118px;
		background-color:#D9D3BB;
		border-right:3px solid #FFFFFF;
	}
	
	#contact
	{
		float:left;
		width:118px;
		background-color:#D9D3BB;
		border-right:3px solid #FFFFFF;
		border-bottom:5px solid #333028;
	}	
	
	#content {
		height:741px;
		float:left;
		left:121px;
		top:47px;
		width:366px;
		overflow:auto;
		border-right:3px solid #FFFFFF;
		border-bottom:5px solid #333028;
	}
	</style>	
</head>

<body onload="resizeCols();">
<div id="mainpage">
<div id="leftcol">
</div>
<div id="contact">
</div>
</div>

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sit amet purus. Curabitur augue magna, volutpat sed, convallis nec, posuere nec, odio. Curabitur et arcu. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sagittis dolor ac leo. Donec interdum metus quis turpis. Vestibulum lorem leo, elementum non, sagittis eu, lacinia quis, lacus. Proin dapibus turpis sed odio ultricies auctor. Donec eget arcu vel magna imperdiet gravida. Etiam consequat rutrum mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In euismod. Quisque tincidunt eros nec quam. Ut dignissim magna a pede. In ac orci. Nullam faucibus, magna sed egestas tempus, velit magna ultrices pede, vitae congue mauris lectus vel diam. Sed nisl leo, semper ac, tristique eget, tempus id, quam. Vivamus posuere.

Nam tempus. Cras posuere enim ut libero. Vivamus vel est sed dui lacinia rhoncus. Maecenas egestas. Sed lobortis congue urna. Pellentesque faucibus, est ac semper suscipit, massa tellus scelerisque arcu, eget aliquet felis elit eget ante. Vestibulum scelerisque tempor tellus. Donec arcu lorem, viverra et, gravida vel, molestie quis, tortor. Vivamus et urna sollicitudin arcu dignissim tincidunt. Nullam vehicula. Maecenas velit. Duis sagittis diam eu urna. Maecenas mauris.

Phasellus interdum, enim sit amet tempus sollicitudin, tellus massa vestibulum dui, a interdum est justo id tellus. Suspendisse pellentesque fringilla erat. In hac habitasse platea dictumst. Aliquam commodo ligula non magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dignissim diam eu lacus. Nunc et enim eu leo bibendum dictum. Aliquam consequat interdum mi. Sed massa arcu, accumsan non, condimentum at, feugiat eu, pede. Sed accumsan justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a enim congue sem tincidunt pellentesque. Vivamus pulvinar. Sed mollis condimentum dui. Vivamus tristique leo eu lectus. Vivamus laoreet neque non urna. Aenean posuere nulla vel odio. Integer ultricies metus et lorem. Phasellus lacinia interdum nisl.

Sed volutpat risus in neque. Praesent scelerisque. Vivamus est leo, eleifend eget, convallis aliquet, pulvinar porta, magna. Donec molestie. Morbi pretium sapien eu lorem. Praesent posuere viverra purus. Fusce condimentum mauris sed orci. Nullam luctus ipsum quis quam. Aliquam mi enim, dictum vitae, mattis at, faucibus vitae, ante. Sed et enim a velit pellentesque faucibus. Morbi ac diam non est ullamcorper tincidunt. Suspendisse potenti. Praesent purus. Vivamus cursus. Praesent varius metus vel urna. Curabitur vel diam eget urna ultrices lacinia. Proin vulputate.

Duis aliquet varius ipsum. Maecenas euismod nisi sit amet neque. Phasellus facilisis scelerisque leo. Aliquam lacinia lorem ac nisl. Integer feugiat augue ac metus. Donec pretium elit sit amet justo. Sed at pede. Sed vulputate tellus quis dolor. Maecenas nisl lorem, sollicitudin et, tristique vel, feugiat sit amet, ante. Curabitur vel odio a ante egestas semper. Vivamus turpis lectus, scelerisque vel, aliquet nec, dictum vel, enim. Proin sagittis porttitor turpis. Fusce porttitor porta risus. Maecenas et mauris pretium est convallis consectetuer. Aliquam tincidunt. Nunc semper iaculis odio. Donec consectetuer fermentum erat. Suspendisse potenti. Ut tristique.
</div>

</body>
</html>


--Devang

This post has been edited by devangnegandhi: 19 September 2007 - 03:09 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1