javascript div container width resize problem

Question

hej guys, I've got a problem trying to resize the width of a div container. I really don't know why it's not working... Thx for responding.

here's the code: It really works with Google Chrome. But with IE or Firefox just won't work.

<div id="div1" style="position:relative; background-color:#000000; width:100px; height:20px; color:#ffffff; text-align:center;">
    <div id="div2" style="position:absolute; background-color:#00ff00; left:0px; top:0px; bottom:0px; width:10px; text-align:right;">
    </div>
</div>

<script>
var container = document.getElementById("div1");
container.style.width = '300px';
</script>

Answer 1

You need to put it all inside a body tag for the javascript to work (document.getElementById):

<body>

<div id="div1" style="position:relative; display:block; background-color:#000000; width:100px; height:20px; color:#ffffff; text-align:center;">
    <div id="div2" style="position:absolute; background-color:#00ff00; left:0px; top:0px; bottom:0px; width:10px; text-align:right;">
    </div>
</div>

<script>
var container = document.getElementById("div1");
container.style.width = '300px';
</script>

</body>

Answer 2

@hacksteak25 has the answer, but if you want to attach handlers to the load events (or most other events) for anything more than a quick hack, you should use the DOM/IE APIs to add event handlers:

function() init{
    var container = document.getElementById("div1");
    container.style.height = '300px';
}

if (window.addEventListener)
    window.addEventListener("load", init, false);
else if (window.attachEvent)
    window.attachEvent("onload", init);

Answer 3

nice solved guys!