Przyciski zmiana położenia, wraz ze zmianą wielkości okna.

Witam,
mój problem polega na tym, że znalazłem ciekawy kod ale nie potrafię go zastosować tzn. brakuje mi czegoś w kodzie co by blokowało przesuwanie się przycisków ze zmianą wielkości okna w poziomie. Uprzejmie proszę o podpowiedzi. Pozdr. http://jsfiddle.net/PhyQc/334/

<section id="demos">      
  <ul>
    <li>
      <a href="http://www.mediafire.com/download/x832niacs4fssha/%5BAventura%5DDeadlyBossMods_WotLK%283.3.5a%29.zip" target="_blank"><span id="demo-default" title="Hi! This is a tooltip.">DBM</span>Deadly Boss Mods
    </li>
    <li>
      <a href="http://www.curseforge.com/media/files/420/271/GEM_Basic_Package3.75-UI2.05.zip" target="_blank"><span id="demo-html">GEM</span> Guild Event Manager 
    </li>
    <li>
      <a href="http://www.mediafire.com/download/p272qrqystjm96p/%5BAventura%5DGearScore%283.3.5a%29.zip" target="_blank"><span id="demo-events" title="Gej score addon">GS</span> Gear Score
    </li>
    <li>
      <a href="http://www.mediafire.com/download/2tafph8pf1bsh8p/%5BAventura%5DRaidMobMarker%283.3.5a%29.zip" target="_blank"><span id="demo-touch" title="(">RMM</span> Raid Mob Marker
    </li>
    <li>
      <a href="http://www.mediafire.com/download/e6y4i3ra1npills/%5BAventura%5DHealBot%283.3.5a%29.zip" target="_blank"><span id="demo-theme" title="Build">HealBot</span> 
    </li>
    <!--<li>
      <span id="demo-callback" title="This will be populated by AJAX.">Hover</span> Custom callbacks (AJAX <3)
    </li>
    <li>
      <span id="demo-interact" title="Try clicking &lt;a href='http://google.com/' target='_blank'&gt;this link&lt;/a&gt;">Hover</span> Interaction with tooltips
    </li>
    <li>
      <span id="demo-icon" title="Use separate icons to launch your tooltips on either desktops or touch devices - or both!"></span> Attach tooltips to icons
    </li> -->
    <li>
      <a href="http://www.mediafire.com/download/78aja7hvm1o10p1/%5BAventura%5DPallyPower%283.3.5a%29.zip" target="_blank"><span id="demo-multiple" title=" Addon do palkowskich bufow"> PPower</span> Do palkowskich bufów
    </li>
  </ul>
</section>

a {
  text-decoration: none;
  color: #0078c9;
  font-weight: 600;
}

a:hover {
  color: #a9b1b3;
}

section {
  width: 0px;
  margin: 0 auto;
  overflow: hidden;
  border-bottom: 2px dashed #e5eaeb;
  padding: 100px;
 } 

ul{ 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border box;
position:absolute;
width: 100px;
margin-left: -350px;
margin-top: -650px;
}

#demos ul {
  display: block;
  width: 50%;
  font-size: 1.4em;
  line-height: 1.4em;
}

#demos li {
  display: block;
  width: 40%;
  font-weight: 400;
  margin-bottom: 10px; 
  overflow: hidden;
  padding-top: 14px;
  padding-right: 1px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  float: left;
}

#demos span {
  display: block;
  border: 3px solid #323232;
  border-radius: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 5em;
  height: 5em;
  background: #323232;
  color: #fff;
  font-size: 0.6em;
  line-height: 1em;
  font-weight: 700;
  padding: 1.8em 0 0 0;
  text-align: center;
  margin: -1.4em 1em 0 0;
  text-transform: uppercase;
  float: left;
}

#demos span:hover {
  background: #fff !important;
  color: #5d6365;
  border: 3px solid #5d6365 !important;
  cursor: pointer;
}

sformatowanie kodu HTML i CSS - furious programming

Czytam twój post trzeci raz i dalej nie mogę sobie wyobrazić co chcesz osiągnąć.

Być może chodzi o to, że nie masz zdefiniowanej na sztywno szerokości przycisku i zmienia się ona dynamicznie wraz z wielkością okna?

Poczytaj o float w css.