Question

i can’t seem to figure out why this works:

#inside-footer {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    font-size: 85%;
}
#inside-footer ul.footer_nav {
    text-align: left;
    float: left;
    margin: 20px 10px;
    position: relative;
    width: 164px;
}

<div id="inside-footer">
      <ul class="footer_nav">
        <h4>Zeigeist</h4>
        <li>
          <a href="/;about">About</a>
        </li>
        <li>
          <a href="/blog">Blog</a>
        </li>
        <li>
          <a href="/;contact">Contact &amp; Support</a>
        </li>
        <li>
          <a href="/training">Training</a>
        </li>
        <li>
          <a href="#">Site Status</a>
        </li>
      </ul>
      <ul class="footer_nav">
        <h4>Tools</h4>
        <li>
          <a href="/;create">Chapter Generator</a>
        </li>
        <li>
          <a href="#">Activies Board</a>
        </li>
      </ul>
      <ul class="footer_nav">
        <h4>Documentation</h4>
        <li>
          <a href="#">Chapter Sites</a>
        </li>
        <li>
          <a href="#">Developers</a>
        </li>
      </ul>
      <ul class="footer_nav">
        <h4>External Links</h4>
        <li>
          <a href="#">News</a>
        </li>
        <li>
          <a href="#">Media</a>
        </li>
      </ul>    <!-- /upper-footer-->
  </div><!-- /inside-footer -->​

but on my site http://zmgc.net/ the list items are across, and not under the header tags.

i would like to display it like http://jsfiddle.net/ypr8g/13/ but equally distributed within the yui3-u-19-24 div and i perhaps i can split this with another yui3-g and put each within a yui3-u-1-4 div but does not seem right!

what am i missing?

thanks

Answer 1

Where you have #inside-footer li {
float: left;
margin-top: 5px;
padding: 0;
} it needs the float taken out as this displays the li’s side by side, change it to #inside-footer li {
margin-top: 5px;
padding: 0;
} and it will display as you want it i.e. below the header tags.