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

<pre><code>&lt;div id="container"&gt;
    &lt;div id="content"&gt;blahblahblah&lt;/div&gt;
    &lt;div id="column"&gt; &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>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.</p>

<p>Styling is similar to this:</p>

<pre class="lang-css prettyprint-override"><code>#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;
}
</code></pre>

<p>This works great when content in <code>#content</code> 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 <code>#content</code>, the images no longer line up (<code>#column</code> 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.</p>

<p>Is there something I am missing here?</p>

<p>@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.</p>

[{'answer_id': 33854, 'author': 'Ricky', 'author_id': 653, 'author_profile': 'https://Stackoverflow.com/users/653', 'pm_score': 3, 'selected': True, 'text': "<p>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):</p>\n\n<pre><code>var divCol = document.getElementById('column');\ndivCol.style.display = 'none';\ndivCol.style.display = 'block';\n</code></pre>\n\n<p>Hopefully this happens fast enough that it isn't noticeable :)</p>\n"}, {'answer_id': 2073214, 'author': 'tedL', 'author_id': 251706, 'author_profile': 'https://Stackoverflow.com/users/251706', 'pm_score': 0, 'selected': False, 'text': "<p>If you are worried about getting a flicker from showing and hiding divCol you can ajust another css property and it will have the same effect \ne.g.</p>\n\n<pre><code>var divCol = document.getElementById('column');\ndivCol.style.zoom = '1';\ndivCol.style.zoom = '';\n</code></pre>\n"}, {'answer_id': 4237045, 'author': 'Yousef Salimpour', 'author_id': 405316, 'author_profile': 'https://Stackoverflow.com/users/405316', 'pm_score': 1, 'selected': False, 'text': "<p>Another workaround which worked for me and had no flickering effect was to add and remove a dummy CSS class name, like this using jQuery:</p>\n\n<pre><code>$(element).toggleClass('damn-you-ie')\n</code></pre>\n"}]
['https://Stackoverflow.com/questions/33837', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/364/']