StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to slide the outer 2 columns under the centre column using HTML and CSS only?
text
Body
copied!<p>First see <a href="http://jsfiddle.net/b2BpB/15/" rel="nofollow">http://jsfiddle.net/b2BpB/15/</a></p> <p>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.</p> <p>When you shrink the width of the browser window - the columns start to stack down the page. </p> <p>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? </p> <p>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)</p> <hr> <h2>--added 19 April 2010 am UK--</h2> <p>This one seems to be stumping everyone - I've added a couple of more tags to see if anyone else can figure it out. </p> <p>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.</p> <p>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.</p> <h2>Thanks in advance...</h2> <h2>--added 19 April 2010 13:44 UK--</h2> <p>@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:</p> <p><a href="http://jsfiddle.net/qr7WB/" rel="nofollow">http://jsfiddle.net/qr7WB/</a> </p> <p>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.</p> <p>If I can just get the left & right divs to but up to the centre div - only sliding under when the browser window forces them to, then bingo!</p> <p>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. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload