Question

I am making a test landing page and using a Gravity Form for the signup, my problem is that when the form automatically resizes after completion (just leaving room for the confirmation message) it pushes up elements below it and breaks the layout. I’m sure its a simple solution but I cant seem to find it. Code structure:

<h3 style="line-height: 15px;">SOME TEXT</h3>
<h3>MORE TEXT</h3>
<h3 style="line-height: 15px;">MORE TEXT</h3>
<h4>MORE TEXT</h4>
<img class="alignnone size-full wp-image-492" style="position: absolute; top: 430px; left: 80px;" src="image.png"width="350" height="202" /></a>
<div style="width: 40%; 
            background-color: #ffce32; 
            border: 3px solid #8E0F0F; 
            position: relative; bottom: 180px; left: 610px; 
            padding: 10px; border-radius:20px;">[my gravity form]</div>

<div style="position: relative; bottom: 160px;">
    <h4 style="text-align: center;">TEXT</h4>
    <img>
    <h4 style="text-align: center;">TEXT</h4>
    <div class="my_gallery" style="margin-left: 110px;"></div>
    <h4 style="text-align: center;">TEXT</h4>
    <p>TEXT</p>
    <h4 style="text-align: center;">TEXT</h4>
</div>

The issue is with the div right below the form getting pushed up and breaking the layout when the form shrinks.

Answer 1

If you don’t want things to move around when things disappear you could try adding a non breaking space to the div so that it is still rendered. Also add a minimum height to the div so it can’t get too small, Something like:

<div style="width: 40%; 
        background-color: #ffce32; 
        border: 3px solid #8E0F0F; 
        position: relative; bottom: 180px; left: 610px;
        min-height:400px; /*you'll have to experiment here to figure out what works*/
        padding: 10px; border-radius:20px;">[my gravity form] &nbsp;</div>

I would also suggest using classes and a css file instead of adding a style to each div.