Элементы нижнего колонтитула сжимаются

Если ты сомневаешься, можешь спросить меня.

Вот ваш код..

<footer id='footer'>
<div class="wrapper">
    <div class="about" style="width:20%;">
      <h1 style="display:block; text-align:right">
        <img width="90" height="90" style="" title="This is the icon of app, look for it on your app store!" src="images/iconq.png">
      </h1>
    <ul>
      <li><a target="_top" href="#link"><img src="http://upload.wikimedia.org/wikipedia/commons/5/5d/Available_on_the_App_Store_%28black%29.png" style="width:120px;" width="100" height="40"></a>
      </li>
      <li><a target="_top" href="#link"><img src="http://www.blog.catblogosphere.com/cb-content/uploads/2013/07/google_play_icon.png" style="width:120px;" width="100" height="40"></a></li>
    </ul>
    </div>
    <ul class="links" style="position:relative;float:left;">
      <li><img src="images/Electronics2.png" width="170" height="91"></li>
      <li>
        <h4>Title Here</h4>
        <ul style="padding:0px;margin:0px;">
          <li><?php 
          $text = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!";
          if(strlen($text) > '120'){
            echo substr($text,0,100)."...";
            echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>';
          } else {
            echo $text;
          }
          ?></li>
        </ul>
      </li>
    </ul>
    <ul class="links" style="position:relative;float:left;">
      <li><img src="images/Electronics2.png" width="170" height="91"></li>
      <li>
        <h4>Title Here</h4>
        <ul style="padding:0px;margin:0px;">
          <li><?php 
          $text2 = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!";
          if(strlen($text2) > '120'){
            echo substr($text2,0,100)."...";
            echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>';
          } else {
            echo $text2;
          }
          ?></li>
        </ul>
      </li>
    </ul>
    <ul class="links" style="position:relative;float:left;">
      <li><img src="images/Electronics2.png" width="170" height="91"></li>
      <li>
        <h4>Title Here</h4>
        <ul style="padding:0px;margin:0px;">
          <li><?php 
          $text2 = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!";
          if(strlen($text2) > '120'){
            echo substr($text2,0,100)."...";
            echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>';
          } else {
            echo $text2;
          }
          ?></li>
        </ul>
      </li>
    </ul>
    <ul class="links" style="position:relative;float:left;">
      <li>
        <h4>Connect With Us</h4>
        <ul class="external">
          <li class="twitter"><img src="images/twitter.png" width="16" height="16"><span class="icon-twitter"></span><a target="_top" href="http://www.twitter.com/SkipQ">Follow us on Twitter</a></li>
          <li class="facebook"><img src="images/facebook.png" width="16" height="16"><span class="icon-facebook"></span><a target="_top" href="http://www.facebook.com/SkipQ">Find us on Facebook</a></li>
          <li class="blog"><img src="images/youtube.png" width="16" height="16"><span class="icon-youtube"></span><a target="_top" href="http://www.youtube.com/">Subscribe on Youtube</a></li>
          <li class="blog"><img src="images/blog.png" width="16" height="16"><span class="icon-youtube"></span><a target="_top" href="http://www.youtube.com/">Read our Blog</a></li>
        </ul>
      </li>
    </ul>
    <div style="clear:both"></div>
  </div>
<div class="container secondary">
</div>
<div class="secondary" style="padding:2px;color:#FFF;background:#1158D4;">
  <ul>
  <li><a style="color:#FFF" href="/help">Help</a></li>
  <li><a style="color:#FFF" href="/policy">Privacy Policy</a></li>
  <li><a style="color:#FFF" href="/terms">Terms</a></li>
  <li>&copy; 2013 SkipQ</li>
</ul>
</div>
</footer>

И это ваш css..:

#footer .wrapper
        {
            color: #969696;
            background-color: #B3B3B3;
            border-top: 1px solid #e1e1e1;
        }

        #footer *
        {
            font-weight: normal;
            padding: 0;
            margin: 0;
        }

        #footer li
        {
            list-style: none;
        }

        #footer h1, #footer h2, #footer h3, #footer h4
        {
            color: #5a5a5a;
        }

        #footer div.divider
        {
            border-top: 1px solid #e1e1e1;
        }

        #footer div.about, #footer ul.links
        {
            float: left;
            padding: 0;
        }

        #footer div.about
        {
            width: 330px;
            padding-left: 0;
        }

        #footer div.about h1
        {
            font-size: 17px;
            font-weight: normal;
            margin: 0 0 5px;
        }

        #footer div.about h1 .comma
        {
            font-weight: bold;
        }

        #footer div.about h1 .logo
        {
            display: inline-block;
            background: url(/assets/codecademy_logo_smallest-0323fdd409fc100a1991db8aa706f57e.png) no-repeat 0 -2px;
            height: 30px;
            width: 105px;
            margin-right: -5px;
            text-indent: -9999px;
        }

        #footer .secondary ul
        {
            margin: 20px 0;
        }

        #footer .secondary select.locales
        {
            top: 15px;
            right: 0;
            width: 120px;
        }

        #footer .about li, #footer .secondary li
        {
            display: block;
            border-right: 1px solid #e1e1e1;
            padding: 0 0px;
            text-align: right;
        }

        #footer .about li:first-child, #footer .secondary li:first-child
        {
            padding-left: 0;
        }

        #footer .about li:last-child, #footer .secondary li:last-child
        {
            padding-right: 0;
            border-right: none;
        }

        #footer ul.links
        {
            float: left;
            border-left: 1px solid #e1e1e1;
            padding-right: 0;
        }

        #footer ul.links > li
        {
            display: block;
            padding: 0 0px 0 0;
            text-align: justify;
        }

        #footer ul.links > li h4
        {
            padding: 0 0 15px;
            font-weight: bold;
            text-transform: uppercase;
        }

        #footer ul.links > li:last-child
        {
            padding-right: 0;
        }

        #footer .links li li
        {
            display: block;
            margin: 0 0 0px;
            height: auto;
        }

        #footer .links a, #footer .secondary a
        {
            color: #787878;
        }

        #footer .links a:hover, #footer .links a:hover .arrow, #footer .secondary a:hover, #footer .secondary a:hover .arrow
        {
            color: #005580;
        }

        #footer .links a .arraow, #footer .secondary a .arraow
        {
            margin-right: 5px;
            color: #08c;
        }

        #footer .external li span
        {
            margin-right: 5px;
        }

        #logo
        {
            background-image: url('images/logo.png');
        }

Наконец, вот твоя скрипка.

Fiddle..