I'm having a bit of a problem putting together what should be a simple javascript layout function, but I'm having trouble. I have a 3 column css layout. each column has a defined width. I want to be able to dynamically assign a width to the columns. That part is simple: document.getElementById("column1").style.width = Math.round(screen.availWidth * .25) + 'px'; PHP: My problem is really that inside one of the columns, I have an absolute-ly positioned div - which I need to be in place in order to deal with an adsense flickering problem. When I reset the width of the column from it's originally defined value, of course the absolute-ly positioned div does not re-position itself. Since it's adsense, it would be a violation of the TOS to move the ad around the screen. So, I decided to try to do this by placing a call to my function in the <HEAD> section of my page - thereby having it occur before page load - which also would help me out by making the layout smooth prior to it being visible. My problem is that now the document.getElementById function does not work since the element I'm trying to get does not exist yet. Is there a way within javascript to change a css style property before an element with that style exists? Right now, I'm feeling relegated to giving the user an option to set a cookie for a wider or thinner layout, but that's not really ideal.
Not sure what your code uses to decide which widths to use, but if you're able to do it before the page loads, could you use PHP to achieve the same effect ?
Call it from onload - at that point the document is fully-constracted and may be manipulated by JS. For example: <body onload="myfunction()"> J.D.