Dfarrelly Dfarrelly - 4 months ago 7
CSS Question

Stop content moving when div is set to visible?

I have a hidden div which get's displayed when a radio button is clicked, However the paragraph beneath it gets pushed down when I make the div visible, is there any way that I can have the paragraph pushed down even when the div is hidden, so that it doesn't move? Here is my code

HTML

<div id="container">Hello</div>
<p>Click the button below to view content</p>
<input type="radio" onclick="displayDiv()">


CSS

#container {
display: none;
color: #fff;
font-size: 30px;
}


Javascript

function displayDiv() {
document.getElementById("container").style.display = "block";
}

Answer

Change the property display by visibility; its purpose is to place the div as if it was on the page, but rendering it invisible if you give it a value of "hiden".

See this

CSS:

#container {
    visibility: hidden;
}

JavaScript

function displayDiv() {
    document.getElementById("container").style.visibility = "visible";
}