Resizing div based on a rendered div and available viewport

I am a Doctor working on a small departmental website. I am using a two-column design within a wrapper "maincontainer" . The wrapper contains a "topsection", a left-floated "navigation", a "contentcolumn" div to the right and a fixed position "footer". The wrapper "maincontainer" has a background colour and is centralized.

I wish to re-size the "maincontainer" to the height contentcolumns + 140px in case scrolling is required. based on my limited knowledge, I am using a JS code (below). However if I put any images in "contentcolumn", the "maincontainer" remains short and "contentcolumn" overshoots the "maincontainer". I seek help on correcting this behavior.

Thanks

Vivek

Full Code is here: http://jsfiddle.net/AuURL/

resize.js

$(document).ready(function() {
 var maincontainer_height=document.getElementById('contentcolumn').clientHeight + 140;
 $("#maincontainer").css("height",maincontainer_height + "px");
});

$(document).ready(function() {
$(window).resize(function() {
 var maincontainer_height=document.getElementById('contentcolumn').clientHeight + 140;
 $("#maincontainer").css("height",maincontainer_height + "px");
});
});

Answers


Need Your Help

How to get css to work in Django

python html css django

For some reason my css file isn't doing anything, can anyone help me figure out why? I think it is being sources properly, because when I look in the source code generated when i runserver and clic...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.