Question

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.

This image should explain it better.

Is there any way I can expand the list elements individually and keep the images on the right edge of the screen?

Here’s my code:

HTML

     <ul id="social">
      <li> <a href="#"><img src="images/iconFacebook.jpg" />Like me on Facebook</a></li>
      <li><a href="#"><img src="images/iconTwitter.jpg" />Follow me on Twitter</a></li>
      <li><a href="#"><img src="images/iconGoogle.jpg" />Add me to Google+</a></li>
      <li><a href="#"><img src="images/iconBlog.jpg" />Check out my blog</a></li>
     </ul>

CSS

    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;
    }

jQuery

    $(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);
    });

    });

Thank you so much for any help.

Answer 1

This does it for you

ul#social li {
    clear: both;
    float: right;
}

The key is to clear: both when floating the elements, which ensures they clear anything which would have been on their row.

See demo: http://jsfiddle.net/kcGZJ/17/