Magento 2.2.5: Blocks added to footer display in wrong order

Question

I've been working on a magento theme, which inherits from Magento/blank, found at http://murkyapparel.com.

As you can see, the footer looks a bit of a mess. I might make some changes, so here is a screenshot for reference:

What I'd like, is something like this:

Or, this:

(Excuse the messy photoshopping... I'm being lazy)

I know that I can use the before="-" and after="-" attributes to re-arrange the order, but the comodo seal is always placed after the (broken) link to my website and isn't aligned properly.

I've tried editing the float and display attributes inline, using chrome's code inspector, through each possible combination of before and after attributes, but I can't find any configuration that will work.

The relevant blocks in my default.xml file are as follows:

<!-- Add joshuaflood.co.uk link to footer block -->
<referenceBlock name="footer">
    <block class="Magento\Framework\View\Element\Template" name="jcf-link" template="Magento_Theme::html/jcf_ad_link.phtml" after="-">
        <arguments>
            <argument name="block_id" xsi:type="string" translate="true">jcf_footer_url</argument>
        </arguments>
    </block>
</referenceBlock>
<!-- Add Comodo secure seal to footer -->
<referenceBlock name="footer">
    <block class="Magento\Framework\View\Element\Template" name="comodo-secure-seal" template="Magento_Theme::html/secure_seal.phtml" after="footer_links">
        <arguments>
            <argument name="block_id" xsi:type="string" translate="true">comodo_secure_seal</argument>
        </arguments>
    </block>
</referenceBlock>

The jcf_ad_link.phtml file is currently as follows (tested with all possible options for the display option within the style attribute, so decided to remove it entirely whilst I (or somebody here) work(s) out the problem):

Website designed by Joshua Flood

The secure_seal.phtml looks like this:

<div class="secure_seal" style="float: right;">
    <a href="https://www.instantssl.com/ssl-certificate.html" style="text-decoration:none; ">
        <img alt="SSL Certificate" src="https://www.instantssl.com/ssl-certificate-images/support/comodo_secure_100x85_transp.png" style="border: 0px;" />
    </a>
</div>

There are no custom CSS styles for either block anywhere else. I know it's not quite magento standard, but I'm planning to convert the majority of my theme's blocks into separate modules so I just want to get the basic layout sorted first and ensure it's all working properly.

The _extends.lessfile within my custom theme contains the following styles for the footer:

/* Footer */
.footer.links li {
    display: inline;
}
.footer.links li + li:before {
    content: " | ";
}
div[id^="st-"] .st-btn {
    margin-right: 16px !important;
}

There is no other custom styling applied to the footer or elements contained within it.

Thanks in advance!

Answer 1

replace your less with this update:

.footer{
    &.content{
        .links{
            margin-bottom: 20px;
            padding: 0 50px 0 0;
            vertical-align: top;
            float: left; 
        }
        .secure_seal{
            float: right;
        }
        .jcf_ad_link{
            float: none;
            clear: right;
        }
    }
}

Note: remove your all inline css.