Menu
Ive got two DIV elements one of which has absolute position (lower left corner of main DIV). The second DIV is hidden and only displayed by clicking on a link.
I need the second one to appear just below the first one. But since the first div's position is absolute the second one appearing on top of first one.
HTML Code:
<div class ="main-div">
<div class = "wrapper">
<div class ="first-div">
<a href ="blah"> <span>my link</span> </a>
//this is absolute positioned
</div>
<div class ="second-div">
//this only appears after clicking on a link
<form>
<textarea>
</textarea>
</form>
</div>
</div>
</div>
CSS:
div.wrapper {
width:inherit;
float:left;
bottom:6px;
position:absolute;
padding: 0 0 0 0;
overflow: auto;
}
div.second-div {
padding-top: 2px
}
div.main-div{
background:{colour} url({image}) no-repeat 0 100%;
width:557px;
padding:8px 13px 4px 13px;
min-height:61px;
position:relative;
}
Thanks in advance for any help.
849
I think the solution entails doing the following. Have a wrapper div:
<div id="my_wrapper">
content
</div>
Have this div absolutely positioned. Then inside of this div have two divs, your visible div, and the one that needs to "become" visible.
<div id="my_wrapper">
<div id="visible_item">Item</div>
<div id="may_become_visible">Not Visible Now Item</div>
</div>
Then you can show/hide as necessary and position the inside content correctly.
127
Ok, with you updated question I believe I've created what you're looking for with the following:
<!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>
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:
div.first-div
{
width: inherit;
float: left;
bottom: 20px;
position: absolute;
padding: 0 0 0 0;
overflow: auto;
}
and then update the link to
<a href="#" onClick="document.getElementById('secDiv').style.display='block';document.getElementById('firDiv').style.bottom='60px';"><span>my link</span></a>
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.
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.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
