title: Need a marquee tag replacement allowing display of multiple images
body: <p>What I'm trying to accomplish is this:<br>
  Display a marquee composed of several (dozen or more) company logos, across the page from right to left in a single row.</p>
  
  <p>I have the following code which works as desired in Firefox, but doesn't work in other (Chrome, IE, Edge) browsers.<br>
  Specifically, if the width of the combined images is greater than the width of the div, the overflow images are displayed on another "line" below, starting at the far left. It seems the duration of the display is as if the images are properly in line (as there is a great deal of blank space / time  after the last image clears the div edge.  </p>
  
  <p>I have tried to use suggested CSS3, and the swimming fish js examples, but they only work with a single image. I'm using php to get multiple images from mysql, they don't fit my needs.</p>
  
  <pre><code>&lt;?php
  session_start();
  require('db.php');
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Template&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/styles.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  &lt;div id="wrap"&gt;
  &lt;div id="header" align="left"&gt;
  &lt;br&gt;
  &lt;font color="gray"&gt;
  &lt;p align="right"&gt;Over &lt;font color="maroon"&gt;&lt;b&gt;500,000 &lt;/b&gt;&lt;/font&gt;flags placed since 2012&lt;/p&gt; 
  &lt;/font&gt;
  &lt;p&gt;&lt;img src="dialmiller.jpg" width="200" height="200" style="vertical-align: middle"/&gt;
  
  &lt;span style="display:inline-block" align="right"&gt;
  &lt;font size="7"&gt;Flags for Fallen Vets &lt;/font&gt;&lt;font size="5"&gt;.com &lt;/font&gt;
  &lt;/span&gt; 
  &lt;figcaption&gt;&lt;font color="gray"&gt;Never Forgotten&lt;/font&gt;&lt;/figcaption&gt;
  
  &lt;/p&gt;
  
  &lt;p class ="social" align="middle"&gt;
  &lt;a href="#"&gt;&lt;font color="black" size="5"&gt;&lt;b&gt;Donate&lt;/b&gt;&lt;/font&gt;&lt;/a&gt;
  &lt;a target="_blank" href="https://www.facebook.com/flagsforfallenvets/"&gt;&lt;img src="fb.png" width="20" height="20" align="right"/&gt;&lt;/a&gt;
  &lt;a target="_blank" href="https://www.twitter.com"&gt;&lt;img src="twr.jpg" width="20" height="20" align="right"/&gt;&lt;/a&gt;
  &lt;/p&gt;
  
  
  &lt;/div&gt;
  &lt;ul id="menu"&gt;
  &lt;ul class="main-navigation"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Our Mission&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;National Cemeteries&lt;/a&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Dallas-Fort Worth&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sponsors&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Board&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Map&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Houston&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sponsors&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Board&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Map&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Florida&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sponsors&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Board&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Map&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Sarasota&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sponsors&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Board&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Map&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;South Florida&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sponsors&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Board&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Map&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Black Hills&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sponsors&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Board&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Map&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
  
  &lt;li&gt;&lt;a href="#"&gt;Fort Meade&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sponsors&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Board&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Map&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
  &lt;/ul&gt;
    &lt;li&gt;&lt;a target="_blank" href="newvolunteer.php"&gt;Volunteer Form&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sponsor Levels&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;2017 Shirts&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Board of Directors&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/ul&gt;
  
   &lt;div class="main"&gt; 
  
  &lt;h4 align="center"&gt; Sponsors &lt;/h4&gt; 
        &lt;?php
         $fetch=mysql_query("select * from banners ORDER by level");
         if(mysql_num_rows($fetch))
            {
        ?&gt;
  
  
    &lt;marquee behavior="scroll" scrollamount="5" direction="left" onmouseover="this.stop();" onmouseout="this.start();"&gt;
  
  
         &lt;ul class="ulclass" &gt;
               &lt;?php 
                  while($row=mysql_fetch_array($fetch))
                   {
                   $id=$row['id'];
                   $feed= $row['image'];
  
                 ?&gt;
             &lt;li class="liclassleft"&gt;
             &lt;?php echo '&lt;img src="img/banners/'.$feed.'"'.' width="125" height="125";'; ?&gt;
             &lt;?php }  ?&gt;
             &lt;/li&gt;
             &lt;?php }  ?&gt;  
        &lt;/ul&gt;
  
  &lt;/marquee&gt;
  
  &lt;/div&gt;
  
  &lt;div id="sidebar"&gt;
  &lt;!-- CONTENT --&gt;
  &lt;p&gt;
  
   oeprjjiowerf wergui c uiweriu2mu[i3r 2wemu  [po23ior  34iopgti34tg 345ti,345t-0,i [po23ior  34iopgti34tg 345ti,345t-0,i
  qerogpwejpiwepmkvpqervm  oeprjjiowerf wergui c uiweriu2mu[i3r 2wemu  [po23ior  34iopgti34tg 345ti,345t-0,i [po23ior  34iopgti34tg 345ti,345t-0,i
  qerogpwejpiwepmkvpqervm  oeprjjiowerf wergui c uiweriu2mu[i3r 2wemu  [po23ior  34iopgti34tg 345ti,345t-0,i [po23ior  34iopgti34tg 345ti,345t-0,i
  qerogpwejpiwepmkvpqervm  oeprjjiowerf wergui c uiweriu2mu[i3r 2wemu  [po23ior  34iopgti34tg 345ti,345t-0,i [po23ior  34iopgti34tg 345ti,345t-0,i
  
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;      
  </code></pre>
  
  <p>Important CSS lines used:</p>
  
  <pre><code>.main { border-bottom:1px #051B42 solid; max-width:99%;max-height:195px; padding:5px; float:left; margin-bottom:1px; }
  
  .ulclass { list-style-type:none;}
  
  .liclassleft { margin:0 auto; border-bottom:1px #808080; font-size:20px; font-family:Tahoma, Geneva, sans-serif; padding:5px;float: left;}
  </code></pre>
  
  <p>I understand the <code>&lt;marquee&gt;</code> tag isn't what I should be using, but except for the wrapping of images it works.<br>
  I'm open to using any form of replacement.</p>