Webkit reflow problem when dynamically changing border to DOM element.

Question

I have two div elements where one wraps around the other. Then I use JavaScript to add border to the outer div in runtime. Somehow webkit based browser doesn't do a reflow when the outer border is changed. The end result looks ugly - the inner div overflows the outer. Here is the HTML code: [div id="outer][div id="inner" style="border: solid blue; height: 50px;"][/div][/div]

Event handler is simple as well: document.getElementById("outer").setAttribute("style", "border: solid green")

I couldn't believe it when I found this out since it's such a trivial reflow task. Or did I missing anything? Does anyone encounter similar problem, what's the workaround? Thanks.

Answer 1

border: solid green Doesn't state any size, eg: "border:1px solid green"

I don't think it's safe to reset the entire style attribute because you might mess up some other things. Try adding a class to className, which is a bit cleaner.

Answer 2

If you set the outer and inner to float:left it will work as planned. However, you will either need to give it a fixed width or have content inside the div (inner).

#outer { float: left;}
#inner { float: left;}

[div id="outer"][div id="inner"]Text[/div][/div]