About

CSS (3)

JavaScript (6)

Web browsers (2)

Blog

JavaScript

I wrote about having dynamic column width without using table cells, and here's a window.onload alternative to the CSS expressions used in that example:

window.onload = function (){
/* 
	The check for document all is to check if the web browser is Internet Explorer 
	(or some other web browser faking to be)
*/	
if(document.all && document.getElementById && 
document.getElementsByTagName && document.getElementById("main-col")){	
	var arrAllMainColDivs = document.getElementById("main-col").getElementsByTagName("div");
	var oDiv;
	var strClassName;
	var oNextSibling;
	var oPreviousSibling;
	var intNewWidth;	
	for(var i=0; i<arrAllMainColDivs.length; i++){
		oDiv = arrAllMainColDivs[i];
		strClassName = oDiv.className;		
		if(strClassName.search(/left-col/) != -1){
			oNextSibling = oDiv.nextSibling;
			if(oNextSibling.offsetWidth > 200){
				intNewWidth = oDiv.parentNode.offsetWidth
					 - (oNextSibling.offsetWidth + 10);
				oDiv.style.width = ((intNewWidth > 0)? intNewWidth : 0) + "px";
			}				
		}
		else if(strClassName.search(/-right-col/) != -1){
			oPreviousSibling = oDiv.previousSibling;
			if(oPreviousSibling.offsetWidth > 300){					
				intNewWidth = oDiv.parentNode.offsetWidth
					 - (oPreviousSibling.offsetWidth + 10);
				oDiv.style.width = ((intNewWidth > 0)? intNewWidth : 0) + "px";						
			}					
		}		
	}
}