The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

What i'm trying to do, is that when there is some content (surrounded in a div with class overflow to indicate it's behaviour) that is wider than the available space in the center div, it overflows into the right hand column, and actually sits on top of the content that is there. As you can see in the example, a horizontal scrollbar is produced. And in IE6, the layout breaks and it puts the center column at the bottom of the page. I'm a bit stuck on this one, any input would be appreciated.

Just as another example scenario, if I had an image in the center column, I'd want it to overflow into the right hand column and lie on top of any content that may be there

You can't apply overflow:auto to an element and then expect any children to be visible outside of that element. Its like setting display:none on a parent and then trying to make the child visible width display:block

The above should do what you want in ie7 (and other browsers) but won't work in IE6 and under. This is because the way that Ie6 will always expand an elements width to accommodate the content and therefore you get the dropping effect because the element is now too wide to sit in the allocated space. The only thing you can do for IE6 is to hide the overflow but I guess that is not what you wanted.

I can't think why you would want the element on top of the right column content anyway but I can't see a way to make this happen in IE unless you set the overflow element to position:absolute but that would mean that you would need to account for the flow in the center column to compensate for the absolute element.

I managed to get it working in IE6+ and most of the others using absolute positioning, and the margin. Unfortunately that means that if I remove the left or right divs, that my content no longer spans into the empty space. Then I have to start dynamically targetting the margin using a body class which we don't have the flexibility to do in this system.

Any ideas how I could maintain the overflow so I can omit the left and right divs where I want, and use absolute positioning to solve this problem?