Sorry about the title cause I know there must be hundreds of these but I truly am lost hence the title.

I am trying to create an online demonstration/builder of how to create a pure CSS 3 column layout. Problem is that the builder portion of the demonstration throws a error at me in IE and gives some funny results.

Here is the demonstration.
http://www.devinrolsen.com/tools/3column/index.html

In the header you have a text input that allows you to change the left and right column sizes. In IE you enter in your desired numbers and in fact the sizes do change but you get and error. Also after the error the left column is not properly positioned but if you click the "Add Content" button in any of the columns the new size and left columns position are as desired.

Here is my functions that preform the resizing of the columns.

function changeWidth()
{
var cssCode = document.getElementById("cssCode");
var htmlCode = document.getElementById("htmlCode");

cssCode.style.display="none";
htmlCode.style.display="none";

var wrap = document.getElementById("wrap");
var wrapStyle = wrap.getAttribute("style","width");

var left = document.getElementById("left");
var right = document.getElementById("right");
var center = document.getElementById("center");

function appendCSS()
{
var width = document.getElementById("columnWidth").value;
var centerWidth = parseFloat(wrapStyle)-parseFloat(width)-parseFloat(width);

center.style.width=centerWidth+"px";

center.style.marginLeft=width+"px";
center.style.marginRight=width+"px";

left.style.marginLeft="-"+width+"px";
right.style.marginRight="-"+width+"px";

var colWidth = parseFloat(width)-25+"px";
left.style.width=colWidth;
right.style.width=colWidth;
}

if (typeof wrapStyle == 'string') { // what Firefox returns
wrapStyle = wrapStyle.replace(/px/g,"");
wrapStyle = wrapStyle.replace(/width:/g,"");

appendCSS();

}
else if (typeof wrapStyle == 'object') { // what IE returns
wrapStyle = wrapStyle.cssText;
wrapStyle = wrapStyle.replace(/px/g,"");
wrapStyle = wrapStyle.replace(/WIDTH: /g,"");
appendCSS();
}
}

Any help is appreciated and well credited.

Probably the usual IE needing a delay problem. Try this:-

window.setTimeout("appendCSS()", 100);




Quizmaster: What season is said to start on the longest day in December?
Contestant: Spring.
Quizmaster: December, for God's sake!
Contestant: Summer.

Hey Philip M,

That seems to break it even more cause now the value of the input box changes nothing. Still works fine in FF though lol.

Its just weird.

I think it might have something to do with IE and parseFloat that turns strings into an integer. I just dont know what it could be, nothing on the net tells me anything. I mean the whole layout adjusting its prior to your desired width is weird but again that might just be related to an IE timing issue but why the error.

Anyone?

w00t got it to work finally.

Philip M thanks for the lead with the timing issue cause it got me testing a little deeper.

For what ever reason IE didn't like me to set a value for the widths of the columns to be anything less than an integer length of at least 3.

I fixed the align problems with an extra function to add and quickly remove an empty paragraph tag in the right column with of course a time out of 1milisec on the remove. Seem to have kicked IE back into gear.

I love IE and its continuing display of wacky zany fun filled faultiness, its what keep me on a payroll.