Responsive scroll content

Question

I want to do a section in my site which has notices into a scroll, but i also want it to be responsive but i can´t because i cannot assign a fixed with to my list items. I will like to know if some one know how i can achieve this, in order to have one notice into my article and the rest of the notices displayed by its side using percentages in order to make it responsive!...ill leave you a fiddle soy you can see what i am trying to do. i´ll appreciate your help guys.

http://jsfiddle.net/xtatanx/GPDn4/

html **

<article>
<ul id="slide">
    <li class="content">
        <h1>tittle</h1>
        <p>
            Cupcake ipsum dolor sit amet tiramisu. Gummies danish
            gingerbread tiramisu jelly-o bear claw powder.
            Gingerbread dessert jelly fruitcake sugar plum pie. 
            Dragée candy canes lollipop gingerbread cotton candy
            sugar plum cookie wafer wafer. Tiramisu sweet roll sweet
            roll candy canes. Cotton candy cake faworki dragée
            wypas chocolate bar tootsie roll tootsie roll fruitcake.
        </p>
        <a href="#">Vew more +</a>
    </li>
            <li class="content">
        <h1>tittle</h1>
        <p>
            Cupcake ipsum dolor sit amet tiramisu. Gummies danish
            gingerbread tiramisu jelly-o bear claw powder.
            Gingerbread dessert jelly fruitcake sugar plum pie. 
            Dragée candy canes lollipop gingerbread cotton candy
            sugar plum cookie wafer wafer. Tiramisu sweet roll sweet
            roll candy canes. Cotton candy cake faworki dragée
            wypas chocolate bar tootsie roll tootsie roll fruitcake.
        </p>
        <a href="#">Vew more +</a>
    </li>
            <li class="content">
        <h1>tittle</h1>
        <p>
            Cupcake ipsum dolor sit amet tiramisu. Gummies danish
            gingerbread tiramisu jelly-o bear claw powder.
            Gingerbread dessert jelly fruitcake sugar plum pie. 
            Dragée candy canes lollipop gingerbread cotton candy
            sugar plum cookie wafer wafer. Tiramisu sweet roll sweet
            roll candy canes. Cotton candy cake faworki dragée
            wypas chocolate bar tootsie roll tootsie roll fruitcake.
        </p>
        <a href="#">Vew more +</a>
    </li>
            <li class="content">
        <h1>tittle</h1>
        <p>
            Cupcake ipsum dolor sit amet tiramisu. Gummies danish
            gingerbread tiramisu jelly-o bear claw powder.
            Gingerbread dessert jelly fruitcake sugar plum pie. 
            Dragée candy canes lollipop gingerbread cotton candy
            sugar plum cookie wafer wafer. Tiramisu sweet roll sweet
            roll candy canes. Cotton candy cake faworki dragée
            wypas chocolate bar tootsie roll tootsie roll fruitcake.
        </p>
        <a href="#">Vew more +</a>
    </li>
</ul>
</article>

css *

html,body
{
    font-size: 100%;
}

p
{
    font-size: 16px;
}
article
{
    background: rgba(0, 0, 0, .4);
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding: 2em;
}

article ul
{    
    margin:0;
    padding:0;
}

article ul li
{    
    width: 100%;
    height: auto;
    display: inline-block;
    margin:0;
    padding:0;
}

h1
{
    font-size:2em;
    text-transform:uppercase;
}

Answer 1

First off you shouldn't really be using <p> inside of li tags - this really isn't very nice semantically. You could use figure instead to set out the text structurally like in this example below:

<ol class="kbarticle">
  <li>
    <figure>
      <a href="#screenshot1"><img src="screen1.jpg" alt="Step 1"></a>
      <figcaption>
        Download the Windows client software <a href="">here</a>.
      </figcaption>
    </figure>
</ol>

Secondly, the reason why your text is over-running is because your javascript is targeting the content class which you have attributed to the <li> tags on the page but the text that is over-running the container is actually within <p> tags. You need to target the <p> tags in your javascript as well - or just simply set a width for the <p> tags (http://jsfiddle.net/GPDn4/3/)