I have the following html sample, where I'd like to have a show and
hide two divs, one replacing the other. Following these two divs is a
third div (the bluediv) which I would like to have placed right up
directly below to the first or second div, depending on which is
showing.
If you load the html in Firefox, and then click on the "Edit" link you
can see that the first div is hidden, the second div is shown, however
the third div is place away from the second div. I've noticed that the
gap is about the size of the hidden div.
Is there a way to do this div show/hide, and still have the third div
lineup directly below the shown div?
Under IE the bluediv is placed exactly as I would like, directly under
the shown div.
Thanks for your help,
Greg
<html>
<script>
function showGeneralEdit(show) {
if (show) {
document.getElementById("GeneralEdit").style.displ ay = "";
document.getElementById("GeneralStatic").style.dis play = "none";
} else {
document.getElementById("GeneralEdit").style.displ ay = "none";
document.getElementById("GeneralStatic").style.dis play = "";
}
}
</script>
<style>
..Section {
border: 1px solid black;
}
..BlueDiv {
background-color:blue;
color:white;
}
</style>
<body>
<div class="Section" id="GeneralStatic">
<div>
<a href="javascript:showGeneralEdit(true)">Edit</a> in static mode
</div>
</div>
<div style="display:none;" class="Section" id="GeneralEdit">
<div>
<a href="javascript:showGeneralEdit(false)">Cancel</a> in edit mode
</div>
</div>
<div class="BlueDiv">
<div>
blue div
</div>
</div>
</body>
</html>
