Question

I have a page where there is a column and a content div, somewhat like this:

<div id='container'>     <div id='content'>blahblahblah</div>     <div id='column'> </div> </div> 

With some styling I have an image that is split between the column and the content but needs to maintain the same vertical positioning so that it lines up.

Styling is similar to this:

#column  {     width:150px;     height:450px;     left:-150px;     bottom:-140px;     background:url(../images/image.png) no-repeat;     position:absolute;     z-index:1; }  #container  {    background:transparent url(../images/container.png) no-repeat scroll left bottom;    position:relative;    width:100px; } 

This works great when content in #content is dynamically loaded before rendering. This also works great in firefox always. However, in IE6 and IE7 if I use javascript to change the content (and thus height) of #content, the images no longer line up (#column doesn’t move). If I use IE Developer Bar to just update the div (say add position:absolute manually) the image jumps down and lines up again.

Is there something I am missing here?

@Ricky – Hmm, that means in this case there is no solution I think. At its best there will be a jaggedy matchup afterwards but as my content expands and contracts etc. hiding/showing doesn’t work out to be practical. Still thanks for answering with the best solution.

Answer 1

Its a bug in the rendering engine. I run into it all the time. One potential way to solve it is to hide and show the div whenever you change the content (that in turn changes the height):

var divCol = document.getElementById('column'); divCol.style.display = 'none'; divCol.style.display = 'block'; 

Hopefully this happens fast enough that it isn’t noticeable 🙂