Dfarrelly Dfarrelly - 1 year ago 60
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


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


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


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

Answer Source

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


#container {
    visibility: hidden;


function displayDiv() {
    document.getElementById("container").style.visibility = "visible";
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download