title: Making a Pure CSS Dock
body: <p>After playing with CSS 3, I had the crazy idea to make an OS X-style dock with it (a DIV container with elements inside it, which, using the CSS :hover subclass, increase in size upon mouseover). However, I'm running into some strange effects when implementing it. So far, this is what I've tried:</p>
  
  <h2>Code</h2>
  
  <hr>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body{
      margin:0;
  }
  .dockHolder{
      width:100%;
      position:absolute;
      text-align:center;
      display:block;
      bottom:0;
  }
  .dock{
      margin-left:auto;
      margin-right:auto;
      bottom:0;
      text-align:center;
  }
  .dockItem{
      height:50%;
      display:inline-block;
      position:relative;
      bottom:0;
      vertical-align:bottom;
      text-align:center;
  
      transition-property:width, height;
      -o-transition-property:width, height;
      -moz-transition-property:width, height;
      -webkit-transition-property:width, height;
      transition-duration:.25s;
      -o-transition-duration:.25s;
      -moz-transition-duration:.25s;
      -webkit-transition-duration:.25s;
      transition-timing-function:linear;
      -o-transition-timing-function:linear;
      -moz-transition-timing-function:linear;
      -webkit-transition-timing-function:linear;
  }
  .dockItem:hover{
      height:100%;
      width:auto;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="dockHolder" style="height:64px;max-height:64px;border:1px solid black;"&gt;
      &lt;div class="dock" style="background-color:lightgray;"&gt;
          &lt;center&gt;
              &lt;div class="dockItem" style="background-color:magenta;"&gt;&lt;img height="100%" src="pony.png" /&gt;&lt;/div&gt;
              &lt;div class="dockItem" style="background-color:magenta;"&gt;&lt;img height="100%" src="bhs256.png" /&gt;&lt;/div&gt;
          &lt;/center&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My test page is at <del><a href="http://s.supuhstar.operaunite.com/s/content/testAnims.htm" rel="nofollow">http://s.supuhstar.operaunite.com/s/content/testAnims.htm</a></del>(died with Opera Unite) if you wanna see what I have so far.</p>
  
  <h2>Missing functionality</h2>
  
  <hr>
  
  <p><strong>Unexpected effects</strong> include:</p>
  
  <ul>
  <li>Inability to place the <code>dock</code> element at the bottom of the <code>dockHolder</code> element</li>
  <li><code>dockItem</code> element not expanding width-wise along with its child image</li>
  <li><code>dockItem</code> and <code>dock</code> elements will not center inside the <code>dockHolder</code> container with CSS (tried <code>margin:auto;</code>, <code>box-pack:center;</code>, <code>box-align:center;</code>, etc.); only the <code>&lt;center&gt;</code> HTML tag works</li>
  <li>In Opera and Firefox (I've given up on IE), <code>dockItem</code>s are extremely wide</li>
  </ul>
  
  <p><strong>Intended effects</strong> that are not present include:</p>
  
  <ul>
  <li><code>dockItem</code>s stay within the <code>dock</code> element until resizing, at which time they increase proportionally to the size of the <code>dockHolder</code> element, but the <code>dock</code> element stays the same size</li>
  <li>The <code>dock</code> element is constantly only wide enough to contain all the <code>dockItem</code>s within it, and never wider not shorter than the combined widths of all <code>dockItem</code>s and their margins.</li>
  </ul>
  
  <h2>Question</h2>
  
  <hr>
  
  <p><strong>Does anyone have a solution that will fix the unexpected effects andor implement the absent intended effects?</strong></p>
  
  <h2>Final implementation</h2>
  
  <hr>
  
  <p>Below is the code of my final solution:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;
  &lt;head&gt;
  &lt;style type='text/css'&gt;
  body{
      margin:0;
  }
  .dockHolder {
      position: fixed;
      text-align: center;
      bottom: 0; 
      left: 0;
      right: 0;
      height: 128px;
      line-height: 128px;
  }
  
  .dock {
      background:#CCCCCC;
      background:
          -o-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
      background:
          -moz-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
      background:
          -webkit-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
      border: 1px solid gray;
      max-width:100%;
      vertical-align: bottom;
      line-height: 1em;
      padding: 0 8px;
      border-radius: 100%;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
  }
  
  .dockItem {
      display: inline;
      height: 50%;
      vertical-align: bottom;
  
      transition-property:width, height;
      -o-transition-property:width, height;
      -ms-transition-property:width, height;
      -moz-transition-property:width, height;
      -webkit-transition-property:width, height;
      transition-duration:.25s;
      -o-transition-duration:.25s;
      -ms-transition-duration:.25s;
      -moz-transition-duration:.25s;
      -webkit-transition-duration:.25s;
      transition-timing-function:ease-in-out;
      -o-transition-timing-function:ease-in-out;
      -ms-transition-timing-function:ease-in-out;
      -moz-transition-timing-function:ease-in-out;
      -webkit-transition-timing-function:ease-in-out;
  }
  .dockItem:hover {
      height: 100%;
  }
  .dockItem:active {
      vertical-align:top;
      height:95%
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="dockHolder" style="height:128px;line-height:128px;"&gt;
          &lt;span class="dock"&gt;
              &lt;img class="dockItem" src="pony.png"/&gt;
              &lt;img class="dockItem" src="bhs256.png"/&gt;
              &lt;img class="dockItem" src="mcgrass.png"/&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Working example (might go out of date): <del><a href="http://admin.s.supuhstar.operaunite.com/s/content/testDock.html" rel="nofollow">http://admin.s.supuhstar.operaunite.com/s/content/testDock.html</a></del> (died with Opera Unite)</p>