Animation on div container

Question

I am implementing a twitter ticker. Each tweet is a div container (with ids as say id="tweet1", "tweet2", etc.) which has multiple other div elements in it (These divs make for the status of tweet, the date, time, tags, etc). All these tweets are contained within the outermost div, say with id="twitter-feed".

The structure is as,

<div id="twitter-feed">....
    <div id="tweet1">....
        <div><div> //For image
        <div><div> // For status
    <div id="tweet2">....
        <div><div> //For image
        <div><div> // For status    
</div>

I want to animate these tweets from left to right, one after the other.

The CSS has,

#twitter-feed {
position:fixed;bottom:0;left:0;width:100%;font-size:50px;Background-color:#CD5C5C;
}

#twitter-feed div {
position:relative;color:yellow;animation:mymove 50s infinite linear;-webkit-animation:mymove 50s infinite linear;   
}

@keyframes mymove
{
from {left:0px;} 
to {left:100%;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:100%;}
}

I also have the working javascript code, which gets the tweets and populates the div elements.

But this code gives output as,

Tweet1....Animating from left to right...then New Line
Tweet2....Animating from left to right...then New Line 

I want to know, how can I put these divs so that the tweets will come one after the other and not one below the other. Everything else is working fine except the way these tweets should be displayed.

I am using the code from the below link. The Javascript loads the tweets and I have changed the CSS code for #twitter-feed. The code which retrieves the tweets If you have a look at the Java script, you will see the tweets are populated as divs.

Please help.

Thanks, Peeyush

Answer 1

Basically you need to style it so that they go inline. This is what I think you mean: http://jsfiddle.net/B6KbV/

If so this is what you need css wise:

#twitter-feed {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    font-size:50px;
    Background-color:#CD5C5C;
    white-space: nowrap;
}
#twitter-feed div {
    display: inline;
    position:relative;
    color:yellow;
    animation:mymove 50s infinite linear;
    -webkit-animation:mymove 50s infinite linear;
}
@keyframes mymove {
    from {
        left:0px;
    }
    to {
        left:100%;
    }
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
 {
    from {
        left:0px;
    }
    to {
        left:100%;
    }
}

You need display: inline to keep it on the same line and white-space: nowrap; to stop text going onto the next line