How to slide the outer 2 columns under the centre column using HTML and CSS only?

First see http://jsfiddle.net/b2BpB/15/

3 columns, aligned to the top of a container which is centred on the page. When the browser window is wider than the container - the example above is good.

When you shrink the width of the browser window - the columns start to stack down the page.

Question: How can I make it so that the outer two columns have a z-index lower then the centre column, so that when the browser window is squeezed, width-wise, instead of the columns stacking down the page, the outer columns slide under (behind) the centre column?

Note: I need to keep the present behaviours. 3 divs align to top of container. 3 divs grow / shrink to fit their contents (can't use fixed width, hight divs for the columns)

--added 19 April 2010 am UK--

This one seems to be stumping everyone - I've added a couple of more tags to see if anyone else can figure it out.

It may help me & others even if you post your initial ideas and explain why they wont work in this instance - to help avoid dead ends.

One avenue I looked at is using iframes instead of divs - but auto resizing iframes in a cross-domain application requires some exotic javascript. I would like to avoid javascript, let alone this cross domain hack. - I think this is a dead end - unless you know otherwise.

Thanks in advance...

--added 19 April 2010 13:44 UK--

@RoToRa - here I get absolute top positioning, divs size to fit content & divs sliding under the main centre div with no stacking down the page as the window is squeezed:

http://jsfiddle.net/qr7WB/

I have used inline style - but this is easy to extract to the CSS file - if I ever get it to do what I want.

If I can just get the left & right divs to but up to the centre div - only sliding under 开发者_如何学Cwhen the browser window forces them to, then bingo!

In terms of the application: I want a 3 col web site. The centre col holds the main content and I want it to take precedent. The outside columns are for subordinate content and ads.

First off: This isn't an answer, however I have several points and it's more readable as an answer.

I don't think what you want is possible. Having elements slide under each other is normally something one want to avoid, so it's not a "standard behavior" of CSS.

You'd have to use absolute positioning to have elements overlap each other, but then you can't have the elements adjust width and height to their contents.

The best I can think of is JavaScript, which could be based on the existing layout (so that it would still be displayed without JavaScript), and just "kick in", when the elements need to overlap. However that wouldn't be a simple script to write, because calculating the correct width it needs to react too, isn't simple.

Another alternative could be CSS 3 Media Queries, which allow you define different CSS rules based on window size, however that would require you to know at exactly which width you want the change.

As I mentioned having elements overlap - especially when they contain text, which one would expect to be able to read - is something one usually tries to avoid. Maybe you should describe your exact scenario (which elements contain which kind of information, and why it's ok for them to overlap) instead of your perceived solution, then it may be possible to suggest alternatives.

BTW I can't see how iframes would have to do with problem at all.

Do You mean like this?

Example Fiddle : HERE

if that's it it will depend on what widths you can or can't set, but if that's the idea more specs would help

It's all floated or inline-block, no absolute positioning so flow should remain to allow for footers to follow.. let me know!

Updated fiddle per comments : HERE