html - フッター項目が凝縮される

Question

なんらかの理由で、ブラウザ ウィンドウのサイズを 1/2 または 1/4 に変更すると、ページのフッター項目が圧縮されてすべてが台無しになります。

例: http://gyazo.com/c1e8d0f77702d597c10c2a0786711545.png

リンク: http://skipq.net/app/index4.php

フッター コード:

<footer id='footer'>
<div class="wrapper">
    <div class="about" style="width:20%;">
      <h1>
        <img width="90" height="90" style="margin-left:130px;" 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="margin-left:75px;margin-top:10px;width:120px;" width="100" height="40"></a>
      </li><br />
      <li><a target="_top" href="#link"><img src="http://www.blog.catblogosphere.com/cb-content/uploads/2013/07/google_play_icon.png" style="margin-left:65px;margin-top:10px;width:120px;" width="100" height="40"></a></li>
    </ul>
    </div>
    <ul class="links" style="height:100%;width:20%;positon:relative;float:left;">
      <center>
        <img src="images/thirdicon.png" width="216" height="91">
      <li style="height:100%;width:75%;">
        <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>
    </center>
      </li>
    </ul>
    <ul class="links" style="height:100%;width:20%;positon:relative;float:left;">
      <center>
        <img src="images/firsticon.png" width="230" height="90">
      <li style="width:75%;">
        <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>
    </center>
      </li>
    </ul>
    <ul class="links" style="height:100%;width:20%;positon:relative;float:left;">
      <center>
        <img src="images/Electronics2.png" width="170" height="91">
      <li style="width:75%;">
        <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>
    </center>
      </li>
    </ul>
<ul class="links" style="positon: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>

</div>
</div>
<br />
<br />
<br />
<br />
<div class="container secondary">
<br />
</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>

さらにコードが必要な場合はお知らせください。もっとあげてくれたら嬉しいです:)

Jsfiddle: http://jsfiddle.net/v4vuh/