title: CSS Overflow Marquee-Line and Floating Divs
body: <p>Alright I am trying to get a row of social news feed to marquee across the screen. The problem I am running into is that when I add more than 6 items to display, it positions them on a new row. How would I go about getting them into one row and them using overflow:marquee-line to scroll them? Would I be better off using Javascript? If so do you know of any scripts?</p>
  
  <p>Below is a picture of what I am working with:
  <img src="https://i.stack.imgur.com/QfyHg.jpg" alt="my issue"></p>
  
  <p>This is the css code that I am working with.</p>
  
  <pre><code>.social-media-mashup {
  display:block;
  width:100%;
  height:150px;
  overflow:marquee-line;
  /* margin: 1em 0; */
  }
  
  .smm-item {
  width:273px;
  height:130px;
  float:left;
  margin-right:6px;
  }
  
  .smm-item p {
  overflow:hidden;
  height:48px;
  }
  
  .smm-item p.entry-meta {
  overflow:hidden;
  height:16px;
  }
  
  #anchor {
  width:100%;
  position:absolute;
  bottom:0;
  }
  
  #rt-bottom { 
  width:100%;
  }
  </code></pre>
  
  <p>And here is the HTML structure.</p>
  
  <pre><code>&lt;div id="anchor"&gt;
  &lt;div id="rt-bottom"&gt;
  &lt;div class="rt-container"&gt;
  &lt;div class="rt-grid-12 rt-alpha rt-omega"&gt;
  &lt;div id="smm-widget-2" class="widget social-media-mashup rt-block"&gt;
  &lt;!-- Social Media Mashup plugin by Brave New Media --&gt;
  &lt;div class="social-media-mashup icons-grey"&gt;
      &lt;!-- Social Media Mashup cache is enabled. Duration: 60 minutes --&gt;
  
      &lt;div class="smm-item smm-twitter"&gt;
          &lt;p&gt;Content&lt;/p&gt;
  
          &lt;p class="entry-meta"&gt;Meta&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;!-- End Social Media Mashup plugin --&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any idea what to do?</p>