We still cannot find the perfect solution to the HTML/CSS question I posed yesterday. And although we have at least two work-arounds for this issue I really, really want to find out if this is possible, so I am throwing down the gauntlet and personally offering a £50 cash prize for somebody who can provide an HTML/CSS only solution for the following: Two divs appear first and second in html code Position the second div above the first div Using NO Javascript Using NO absolute positioning Using NO relative positioning Using NO HTML tables HTML div elements must contain the copy Both inner divs must be "contained" by the container div The second div, once positioned above the first must be allowed to contract and expand with its content, and the first div underneath it must flow naturally and accordingly. The first div (positioned) below musy also be allowed to automatically resize with its content. If appropriate you may use other CSS block or in-line elements in place of the inner divs (e.g. spans, etc) but in that case I reserve the right to half the prize fund. Any solution must be appropriate to put in front of a client. Here's the basic html you must use: <div id="container"> <div id="firstdiv"> content for first div </div> <div id="seconddiv"> content for second div </div> </div> Here's some basic CSS to get you started: #container { width: 100px; border: solid green; padding: 5px 5px 5px 5px; } #firstdiv { width: 96px; border: 2px solid red; } #seconddiv { width: 96px; border: 2px solid blue; } This is what you get from that HTML and CSS: Competition closes this Friday at 4:30pm. First person to do it wins £50. Think of those crinkly brown beer/handbag/shoe tokens! Pass this on to whoever you wish. Ask your friends, family, dog. (Wait, you have a CSS coding dog? Cool!) Go for it!
I can tell you right now that it's going to be impossible to do what you want with the limitations you've imposed unless you were to resort to negative margins, setting a firm height on the DIV containers and then setting their overflow properties to auto; Is that acceptable to you?
Here's an example of what I mean (didn't check in IE). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <style type="text/css" media="screen,projection"> * { margin: 0; padding: 0; } #container { border: solid green; padding: 5px 5px 120px 5px; width: 100px; } #firstdiv { border: 2px solid red; height: 100px; margin-bottom: 10px; overflow: auto; width: 96px; } #seconddiv { border: 2px solid blue; height: 100px; margin-bottom: -120px; overflow: auto; width: 96px; } </style> </head> <body> <div id="container"> <div id="firstdiv"> content for first div </div> <div id="seconddiv"> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> </div> </div> </body> </html> Code (markup):
Ok, here we go. Got the DIVs positioned correctly. There's a bit of a gap, but that's to be expected. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <style type="text/css" media="screen,projection"> * { margin: 0; padding: 0; } body { padding: 10px; } #container { border: solid green; padding: 110px 5px 120px 5px; width: 100px; } *:first-child+html #container { padding-top: 115px; padding-bottom: 0; } * html #container { padding-top: 125px; padding-bottom: 0; } #firstdiv { border: 2px solid red; height: 100px; margin-top: 20px; overflow: auto; width: 96px; } #seconddiv { border: 2px solid blue; height: 100px; margin-top: -225px; overflow: auto; width: 96px; } *:first-child+html #seconddiv { margin-top: -210px; } * html #seconddiv { margin-top: -220px; } </style> </head> <body> <div id="container"> <div id="firstdiv"> content for first div </div> <div id="seconddiv"> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> content for second div<br /> </div> </div> </body> </html> Code (markup):
Just wanted to let you know I updated the stylesheet to get IE 6/7 working properly. The demo works as advertised (albeit with the overflow property I mentioned earlier) in IE 6, IE 7, Firefox, K-Meleon, Opera 9, Safari 3 Beta for Windows (which renders almost identically to Safari 2 for Mac). This is, unfortunately, as close as you're going to get with the current CSS implementation, browser support and your own restrictions.
Cool solution, unfortunately did not win prize as it is technically impossible but this solution was close, it just did allow flowing text. Anyway rep added thanks
And it won't allow flowing text because you have to dynamically determine and adjust the position of the first DIV relative to the second DIV whenever the text expands, which will require JavaScript (believe me, I tried).