Time for a dev post!

At the end of a major product launch for our first release of SHMU - the first product on the funky new Music Online product  platform.

Usually when dealing with Internet Explorer limitations, there's either a standard hack approach, or a solution can be readily found online (or it's just plain impossible). I couldn't readily find either for the below, so was seized by the desire to write it up.

When you have two adjacent divs, the first one of which may or may not be there (sidebar), and the second needs to be moved to suit (main content), CSS2 allows a pure CSS solution with sibling selectors:

/*if first element preceeds second, apply rule to second element*/
#layout_sidebar+#layout_main_content {
   margin-left:10em;
}

(Incidentally, I didn't know about these until my line manager (phrase seems so formal!) Paul pointed it out; turns out my 3 year old Visibone reference omits them...)

Predictably, IE's response to sibling selectors is "que?". Didn't want to go back to conditional code generating the markup. So use IE-only expressions:

/*IE hack - have margin if sidebar exists*/

#layout_main_content {
   margin-left:expression(document.getElementById('layout_sidebar')==null?"0em":"10em" );
}

/*override the above for child*/

#content_inner
{
    margin-left:auto;
}

Footnote: IE7 is meant to support sibling selectors, but they apparently left them out after all. What-ever.