StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Ok, with you updated question I believe I've created what you're looking for with the following:</p> <pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <body> <style> HTML { margin: 0px; padding: 0px; height: 100%; } BODY { margin: 0px; padding: 0px; height: 100%; } div.first-div { width: inherit; float: left; bottom: 60px; position: absolute; padding: 0 0 0 0; overflow: auto; } div.second-div { display: none; position: absolute; float: left; bottom: 0px; } div.main-div { background:{colour} url({image}) no-repeat 0 100%; width:557px; min-height:61px; position:relative; float: left; height: 100%; } </style> <div class="main-div"> <div id="firDiv" class="first-div"> <a href="#" onClick="document.getElementById('secDiv').style.display='block';"><span>my link</span></a> //this is absolute positioned </div> <div id="secDiv" class="second-div"> //this only appears after clicking on a link <form> <textarea></textarea> </form> </div> this is my content </div> </body> </html> </code></pre> <p>Now, what this does is absolute position both the first and second divs at the bottom of the page, positioned so that they don't overlap each other. If you don't like the fact that the first div is up so high from the bottom of the page, you can modify the first-div style as such:</p> <pre><code>div.first-div { width: inherit; float: left; bottom: 20px; position: absolute; padding: 0 0 0 0; overflow: auto; } </code></pre> <p>and then update the link to </p> <pre><code><a href="#" onClick="document.getElementById('secDiv').style.display='block';document.getElementById('firDiv').style.bottom='60px';"><span>my link</span></a> </code></pre> <p>Basically, what you're doing there is changing the first div to be closer to the bottom of the page but then moving it when the link is clicked so that there's more room for the second div.</p> <p>It's not solving the underlying issue of displaying a relative positioned div under an absolutely positioned div, but hopefully is resolves your specific problem.</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