Forum
How to make divs move up to fill available space
Hi all,
Me again.
Was just wondering if there was a way to have divs move up to fill available space? I have the divs in a column half the size of the page so I can fit two side by side. When I add the image however it shoves the row below down and leave empty white space. Is there any way to have the one below move up to fill the space?
Here's my code:
<div style="padding-top: 10px" class="col-md-6">
<img style="height: 100%; width: 100%; object-fit: contain" src="<perch:content type="image" id="image" label="Image" order="1" />" />
<h3><perch:content type="text" id="job_title" label="Job Title" order="2" required="true"/></h3>
<p style="min-height: 80px" align="justify"><perch:content type="textarea" id="description" label="Description" order="3" required="true"/></p>
<div style="display: inline-block">
<a class="<perch:content type="text" id="class" label="Class" order="5"/>" href="<perch:content id="file" type="file" label="File" order="6"/>" target="_blank"><perch:content type="text" id="desc" label="Button Text" order="4"/></a>
</div>
<div style="display: inline-block">
<a class="<perch:content type="text" id="class2" label="Class" order="8"/>" href="<perch:content id="file2" type="file" label="File" order="9"/>" target="_blank"><perch:content type="text" id="desc2" label="Button Text" order="7"/></a>
</div>
</div>
This doesn't sound like a Perch question, so I'll leave it here in case anyone else wants to help.
Hi,
The code
align="justify"is deprecated.Maybe try using CSS floats, or render your images as backgrounds.
Hope that helps a little.
Hi Conor,
You have wrapped all the divs in the half width column. If you close the 6 col div after the image and open another the job title, description and buttons will appear alongside...