Last Line of Footer arrangement

I am not exactly sure how to explain my question as I am not sure what to call the location area.
What I am wanting to do is get the bottom of the webpage where the Authorize.net and secure site with Copyright under it so they are horizontal instead of vertical.
Here is my webpage so you can see what I am talking about
https://thevideocopilot.com/

I would like the Authorize.net and Secure Site next to each other not one under the other. I want to add the paypal emblem as well after the secure site.
As you can see, I gave up trying to figure out how to put the copyright in the middle and just went with periods to adjust location. (pretty lame, I know)
Is there some easy way to make these horizontal across the bottom and put the copyright on the next line in the middle or bottom right?

Thanks for any help. If there is a module that makes it easy to add this kind of thing I don't even mind getting it. I just don't know exactly what line that is. I don't want to add it to the footer about with the information, services, extra, and account area. I want it below it like it is.

Low in your template/common/footer.tpl find the line beginning "<!-- (c) 2005, 2013." Without teasing it all apart to count them, it does appear that starting ON THAT line and continuing to but not including </body>, you have discombobulated your divisions (<div> and </div>). You can play with all of the following.

You can make an old fashioned table with one row and a cell for each item using align (you aren't ready for float):
<TABLE WIDTH="95[Or_Other]%"><TR>
then for each cell
<TD STYLE="width: 5[Or_Other]%; align: left; valign: middle;">[stuff]</TD>
<TD STYLE="width: 5[Or_Other]%; align: left; valign: middle;"">[stuff]</TD>
<TD STYLE="width: 5[Or_Other]%; align: left; valign: middle;"">[stuff]</TD>
then to control center swath while you are unfamiliar with table positioning
<TD STYLE="width: 70[Or_Whatever_the_Balance_Is]%; align: right; valign: middle;"">[NO stuff, just a spacer]</TD>
ending with one for the copyright (IF you want it right)
<TD STYLE="width: 15[Or_Other]%; align: right; valign: middle;"">[stuff]</TD>
then close it out
</TR></TABLE>.

You can instead put each item inside a <DIV STYLE="position: relative; margin-left: [number]px;">[stuff]</DIV> pair and set the number of pixels to force them where you want them.

Align has the advantage that positioning is relative to screen edges, not to screen size, whereas pixels are pixels. Align and text-align have left, center, right values. Valign has top, middle, bottom values. You can play with those till you think you're happy. Float wants to go left or right; it will probably drive you nuts.

You can also just open the original virgin footer.tpl and look at what you discombobulated, then redo the bottom.

Thank you butte,
I will try to compare it to the default that comes with opencart.
Here is my current footer if it will paste correctly.

<div id="footer">
<?php if ($informations) { ?>
<div class="column">
<h3><?php echo $text_information; ?></h3>
<ul>
<?php foreach ($informations as $information) { ?>
<li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
<?php } ?>
</ul>
</div>
<?php } ?>
<div class="column">
<h3><?php echo $text_service; ?></h3>
<ul>
<li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
<li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>
</ul>
</div>
<div class="column">
<h3><?php echo $text_extra; ?></h3>
<ul>
<li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li>
<li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li>
<li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li>
</ul>
</div>
<div class="column">
<h3><?php echo $text_account; ?></h3>
<ul>
<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
<li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li>
</ul>
</div>
</div>
<!-- (c) 2005, 2013. Authorize.Net is a registered trademark of CyberSource Corporation --> <div class="AuthorizeNetSeal"> <script type="text/javascript" language="javascript">var ANS_customer_id="c0cdbb3f-ed14-4276-bd35-6424c7c25df9";</script> <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js" ></script> <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Online Payment Service</a>
</div>
<div class="column">

<script type="text/javascript" src="https://mylivechat.com/chatwidget.aspx? ... "></script>
<a href="http://www.beyondsecurity.com/vulnerabi ... opilot.com" >
<img src="https://secure.beyondsecurity.com/verif ... nner-1.gif" alt="Vulnerability Scanner" border="0" />
</a>
...............................................................................................CopyRight TheVideoCopilot.com 2009-2013................................................................


</body></html>

That is located in Catalog/view/theme/default/template/common.footer.tp.
I may have combobulated something else in another location as well.

Starting with this "<!-- (c) 2005, 2013." and ending just before "</body>" the only difference from the block I noted above is that the footer file shows the script, viewed source did not. That is the block I noted above. It is where it should be, in the common/footer.tpl file. That is the block to play with. Leave the script alone and intact, except to put it last before the </body> closing tag.

I played around with it for a few hours. I could move them around, but I could never get the Authorize.net with the Secure Site side by side. I tried putting the Secured Site after the Authorize as well. There must be something in that code that will not let me put it next to anything else. Do the columns have to be set up elsewhere first then the content added here? Seems like I remember having it elsewhere to edit some of the content in the Information, Customer Service, Extras, and , My Account.

If they are put to the right of the normal footer Information columns, in their own column, they they should stack vertically. In order to place them side by side with enough room the would need to be either in a new row underneath the foregoing columns still in that portion of the footer, or instead in the bottom row where you have them. The table cells (each TD) force columns within one row (singe TR). Two divisions (DIV) may be interfering. Where you see "<div class="AuthorizeNetSeal">" the class may be a placeholder but if it shows in .css you might be able to see why there is vertical stacking or offset. Simplest there is to change the "div" to "ddiv" to silence it. Where you see "<div class="column">" you may see in .css what that is doing, but you can likewise silence it, too. Owing to strays near the bottom, in effect you need to change "</div><div class="column">" to "</ddiv><ddiv class="column">" (you'll see a line break between them, it can stay or go away). Then neither div will mess with the little table. You can put the styles that are in the TDs into DIVs wrapping each TD's content, such as <DIV STYLE="[what it says in TD]">[STUFF]</DIV>. Pinpointing where hierarchic styling needs to be can take a few moments to try alternatives. As soon as the vertical stacking stops you can stop messing with it. Then where you have each silenced ddiv or /ddiv just kill the <[whole tag]> containing it.

Not to worry about at this stage, but for mopping up what seems to be a mess in the footer, be aware that ideally every tag that opens is closed, with certain standard exceptions such as (among others) breaks and hard lines anywhere and various tags inside table cells. A div should be closed by its own /div (they are nested, READ them first, if need be use a printout and highlighter). In a text editor you can find/replace every instance of <div with <div and then of </div with <div so that replacements cause no change but you can see how many there are of each kind. The two numbers should match unless any div opens just before footer is opened (then there would be at least one more /div than div in the footer itself). Unclosed tags can make a mess of rendering, some matter (such as table remnants), some don't (close them anyway if they aren't standard exceptions).

I have played around with it and it just does not work. The emblems are still in the grey area that is the footer with the information, services,extras, and account.
I think it needs to be in a new area below it. Because it appears the code above has the columns setup in another area of the coding for the following. The wording in this code for those items is not what is in the actual column on the page. For example, Under the second column with $text_service, It actually says customer service which leads me to believe this column is actually created elsewhere. that is not what is on the page. Extras is plural on the page but not here. And account is actually MY Account on the page and not here. It actually says customer service which leads me to believe this column is actually created elsewhere.

<div id="footer">
<?php if ($informations) { ?>
<div class="column">
<h3><?php echo $text_information; ?></h3>
<ul>
<?php foreach ($informations as $information) { ?>
<li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
<?php } ?>
</ul>
</div>
<?php } ?>
<div class="column">
<h3><?php echo $text_service; ?></h3>
<ul>
<li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
<li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>
</ul>
</div>
<div class="column">
<h3><?php echo $text_extra; ?></h3>
<ul>
<li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li>
<li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li>
<li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li>
</ul>
</div>
<div class="column">
<h3><?php echo $text_account; ?></h3>
<ul>
<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
<li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li>
</ul>
</div>

The core files appear in families of model/, controller/, and language/, alike, as subdirname/name.php and theme/[themename]/template/subdirname/name.tpl, and in some cases there are four, in others three of those files. The instances of common/footer.* follow that same family pattern. Together they contribute to, for example at hand, the footer. Yes, some of what goes on springs from three or four files.

You seem to be just overthinking it at this point. A couple of posts above, "Where you see "<div class="column">" and can silence that with "ddiv" the reason for silencing it was that you had the "column" class activated (and never closed) just before your emblems started BELOW the "information" columns in the footer proper. Your emblems and copyright notice are in the additional crossbar below that. THAT change was suggested in order to tear the bottom crossbar out of the clutches of "column" and whatever other unclosed div and other tags were still above. The tags were a mess, probably still are, can't tell, doesn't matter. You might try divorcing yourself from what you were trying, and take another tack.

If you put that table arrangement into a little file all by itself and save that as footeremblems.htm, then you should see the arrangement all by itself, isolated from all of the footer divs and from any ddivs you made. Keep that file at the same level in the tree as index.php and address it (specifically by name, in addition to [storename] and instead of [storename]/index.php, whichever way you have fired the store itself) in the browser. It should summon the images and you should be able to evaluate how they are laid out. The example is set up for cells left to right, content within each left except in the copyright notice's instance, and their table set to full or slightly under full width. Play with those values and you should get there.

If that does as you wish, then that block can be put below everything else in the footer file. You could turn it into live php echoes and "require" it once, but that would be overkill. All you want, it seems, is to lay out the emblems and then the copyright notice, all left to right, without undertaking a proverbial Federal Project. If you really want to find the limits of your temper or amusement, you can throw in "margin-right: [N]px;" and "float: right;" here and there and watch what happens, but you probably don't want to do that to yourself at this stage.

Butte,
Thank you for the explanation. I think I might be starting to comprehend some of this. I do apologize. Coding is not a strong point of mine in any way other than cut and paste.
So, I think I understand now the difference between div and ddiv. The second basically closes out the column so anything under it is not associated or bound by the perimeters of the previous column. I hope that is what you mean. I will test it out and see how it works out.
This is a nice suggestion "If you put that table arrangement into a little file all by itself and save that as footeremblems.htm" Thank you very much.
Ward

No apologies necessary or even appropriate, you're learning and trying it hands-on. DIVisions are tags that open and close. Substituting DDIVision simply makes it meaningless. The system knows that DIV means division, it interprets DDIV as nonsense and does not try to execute that (which is the point, to silence a DIV by calling it DDIV). In order to CLOSE any tag, the </ syntax is used, as in <div>[whatever]</div>. In order not to have strays, for each <ddiv> there should also be its corresponding </ddiv>. (You can watch what unclosed tags do by making a file with only a modestly complicated table in it (complications just for visible effect), and then sloppily closing its <TR row and <TD cell tags -- the bottom probably won't be the only thing that goes goofy.)

Each named tag and each named class plays its own roll. Where there was a "column" class opened above your crossbar but never closed before or after your crossbar, that lit but never doused whatever "column" in your .css was intended to do. When you have DIV or any other tag with a CLASS or ID or NAME inside it, those attributes usually tell the machine something to do or to keep track of. In forms, for example, you may need to differentiate boxes and buttons, so that the machine keeps straight what is going on. (It is initially as clear as mud -- there is a device called button, there is a device called submit, and there is a device called reset, so if you have multiple buttons or submits or resets, or buttons that are not submits or resets, then you need to give them names or IDs; the primary device is either a button or a submit; a button does not have to be inside a form, a submit normally wants to be inside a form, and you cannot put a form inside a form; but with complications it goes downhill from there.)

Wow, you have gone out of your way to explain and teach me a bit about the code and what each means. I really do appreciate the help and generosity of your time. Thank you very much. I have some things to play with and learn tonight.

You're quite welcome, you're actually having a go at it. Of course, you haven't yet seen the closed book quiz.

There are several web tutorials on html and script with examples, ranging from easily followed to tedious. Those on any first page of datadump will normally amply suffice for finding both kinds.

You were very helpful. I finally got it to where I can live with it.

https://thevideocopilot.com/

Thank you very much Butte

You're welcome. You're rid of the stacking. Now you can adjust image heights, along the lines of height="nnn" width="nnn" in IMG tags or height: nnnpx; and width: nnnpx; in DIV or IMG as in-line styling. If you use a calculator to get the widths for a common height, then the row of images can be consistent in height. The Authorize wreath will not be a good basis, it's way too tall, but the others could be brought up to the height of Secure Site and still fit.

Your copyright notice needs this format: "Copyright &copy; 2005-2013 by TheVideoCopilot.com" (&copy; is one code for the encircled c, and copyright is one word). It can actually be in small but legible type.

Then you'll still need to fiddle with overall widths and centering. Virtually everything below the menu crossbar under the header is too narrow and too left. Play with your .css margin-left, padding-left, width: , and other settings class by class. It's getting there.

Thanks for the type on the copyright. I changed it and it looks much better. I will next play around with the height of the emblems.
I suspected the Authorize.net emblem was non negotiable. It did help a lot playing around with testing it as an .htm file. Except the Authorize.net did not disply. I assume because it is a java script