title: Using jQuery to expand individual <li> elements, that are positioned against the right edge of the page?
body: <p>I'm having some problems expanding some list elements with jQuery. The lists are a series of social media icon links that I want to expand on mouseover. The problem is that when expanding the width of the li, the ul also expands, and since the images in the li are floated left they appear away from the right edge of the screen. The only way I've managed to get the text and image to sit nicely together is by floating the image. My a elements have a set width of 30px and the jQuery expands the width to 200px.</p>
  
  <p>This image should explain it better.</p>
  
  <p><a href="https://i.stack.imgur.com/xTHMp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xTHMp.jpg" alt="visual explanation"></a>
  </p>
  
  <p>Is there any way I can expand the list elements individually and keep the images on the right edge of the screen?</p>
  
  <p>Here's my code:</p>
  
  <p>HTML</p>
  
  <pre><code>     &lt;ul id="social"&gt;
        &lt;li&gt; &lt;a href="#"&gt;&lt;img src="images/iconFacebook.jpg" /&gt;Like me on Facebook&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/iconTwitter.jpg" /&gt;Follow me on Twitter&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/iconGoogle.jpg" /&gt;Add me to Google+&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/iconBlog.jpg" /&gt;Check out my blog&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    ul#social {
        display: block;
        list-style: none;
        position: absolute;
        right: 0px;
        top: 283px;
        z-index: 1600;
      }
  
      ul#social li {
        margin-top: 10px;
      }
  
      ul#social li img {
    float: left;
      }
  
      ul#social li a {
        display: block;
        height: 30px;
        width: 30px;
        line-height: 30px;
        vertical-align: middle;
        text-decoration: none;
        display: block;
        color: #FFFFFF;
        background: #f47920;
      }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>    $(document).ready(function(){
  
      $('ul#social li a').mouseover(function() {
        $(this).stop().animate({
          width: '200px'
          }, 300);
      });
  
      $('ul#social li a').mouseout(function() {
        $(this).stop().animate({
          width: '30px'
          }, 300);
      });
  
      });
  </code></pre>
  
  <p>Thank you so much for any help.</p>