How can I fill in the whitespace in this Silverstripe table?

Question

I'm working on a Contact Details page in Silverstripe. I'm having problems developing the template for the page, however.

The ContactDetails model has many OurServices and OtherServices within it. These Service contacts are just DataObjects which have basic contact details for the department handling the service in the organisation.

What I'm trying to achieve is a flexible way to display each data type side-by-side. Each data type has its own column in the template, which you can see in this image:

The problem that I'm having is that I need to fill in the gap in the bottom left corner. I need some way to insert an empty in this space.

Here's my template code for this:

<div class="tableContainer">
    <% if $OurServices %>
    <div class="contactTable ourServices">
        <div>
            <div class="contactHeader">
                <h3 class="contact">Our Services</h3>
            </div>
        </div>
        <% loop $OurServices %>
        <div>
            <div class="contactContent">
                <p class="left bold">$Title</p>
                <p class="left">Tel: $Phone</p>
                <p class="left">Email: <a href="mailto:{$Email}">$Email</a></p>
                <% if $Facebook %><p class="left"><a href="{$Facebook}" class="contact" target="blank">Facebook</a></p><% end_if %>
                <% if $DetailURL %><p class="left"><a href="{$DetailURL}" class="contact" target="blank">Find out more</a></p><% end_if %>
            </div>
        </div>
        <% end_loop %>
    </div>
    <% end_if %>
    <% if $OtherServices %>
    <div class="contactTable otherServices">
        <div>
            <div class="contactHeader">
                <h3 class="contact">Other Services</h3>
            </div>
        </div>
        <% loop $OtherServices %>
        <div>
            <div class="contactContent">
                <p class="left bold">$Title</p>
                <p class="left">Tel: $Phone</p>
                <p class="left">Email: <a href="mailto:{$Email}">$Email</a></p>
                <% if $Facebook %><p class="left"><a href="{$Facebook}" class="contact" target="blank">Facebook</a></p><% end_if %>
                <% if $DetailURL %><p class="left"><a href="{$DetailURL}" class="contact" target="blank">Find out more</a></p><% end_if %>
            </div>
        </div>
        <% end_loop %>
    </div>
    <% end_if %>
</div>

This is really a basic (and embarrassing!) logic problem, and isn't specific to Silverstripe. I just cannot seem to figure out how to approach it. Any help is much appreciated!

Answer 1

Why not place your tabular data into a tag and style it accordingly? You can do this with <td colspan="2">...</td> on whichever column contains your content. You can then use CSS to add padding to the left of your content.

Answer 2

Noone can tell to you, untill they'll your css, cause i am (personaly) don't know- in what ways ar div's positioned. But i would do like this (with 2 queries):

Answer 3

Could perhaps use a min-height css attribute?

Alternative could be to do something a bit more engineered and count the number of items, work out which set has more and what the difference is then inject the difference amount of items into the DataList of the shorter list before displaying onto the template. Actually this might be over engineered, probably a simpler way to get similar results.