Float CSS Badge next to each other I guess I want to float

I would like to know how to float all my badges next to each other in the footer menu. I have four badges so far but could be up to six. The badges are my SSL, AVG, BBB, Etc... I am very very new to all this website building stuff. I use Joomla 3.1 and use a paid up to date template. I can see all the codes and add the badges but they always pop up on top of each other. I had one person help me but they did it in tables and told me that it would work but that it was not the right way to do it. Please remember when helping me that I am a child learning to color for the first time when it comes to this :) Thanks for any help that any one my be able to give.

If you look at the bottom of this page( http://www.jcluforever.com/J-ADORE-GOD-CHRISTIAN-T-SHIRT-p/ts-jdrgod-prp.htm )that the badges they have for payment, SSl, and up front; this is how I want my to line up only I would like mine in the footer and I have like 5 that I would be adding some idea of what I would have is https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;">

next one would be

<div id="avgthreatlabs_safetybadge_small"><noscript><a href="http://www.avgthreatlabs.com?utm_source=H&utm_medium=NA&utm_campaign=SSBW" target="_blank">AVG Threatlabs</a></noscript></div><script language="javascript" src="https://api.avgthreatlabs.com/static/js/security_s.js"></script>

next would be

<!--- DO NOT EDIT - GlobalSign SSL Site Seal Code - DO NOT EDIT ---><table width=130 border=0 cellspacing=0 cellpadding=0 title="CLICK TO VERIFY: This site uses a GlobalSign SSL Certificate to secure your personal information." ><tr><td><span id="ss_img_wrapper_110-55_flash_en"><a href="http://www.globalsign.com/" target=_blank title="SSL"><img alt="SSL" border=0 id="ss_img" src="//seal.globalsign.com/SiteSeal/images/gs_noscript_110-55_en.gif"></a></span><script type="text/javascript" src="//seal.globalsign.com/SiteSeal/gs_flash_110-55_en.js" ></script><br /><a href="http://www.globalsign.com/" target=_blank  style="color:#000000; text-decoration:none; font:bold 8px arial; margin:0px; padding:0px;">GlobalSign SSL Certificates</a></td></tr></table><!--- DO NOT EDIT - GlobalSign SSL Site Seal Code - DO NOT EDIT --->

and so on and so on until I place all the badge I want or can or need to. I am not sure what part of the template you need it is all short or what is called LESS I am told

Solution

Best practice is to have these badges nested in an unordered list. Each badge would be inside of a list item. For this example, let's say each badge is just an image. Try this:

<ul class="my-list">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>

Then, in your stylesheet, write:

.mylist {
   list-style:none;
} 

.mylist li {
    float:left;
}

This will float all your items to the left of the page and "stack" the list items beside each-other, instead of on top of each-other.