<!-- We want to center our <ul> into the container REGARDLESS of the number of <li> inside our <ul> -->

<h1 id="title">How to center floating elements</h1>
<p id="subtitle">Without setting a width <b>&</b> Regardless of the number of children</p>
<section id="container">

    <div class="float_center">
        <ul class="child">
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>

    <div class="float_center">
        <ul class="child">
          <li><a href="#">lnk 1</a></li>
          <li><a href="#">lnk 2</a></li>
          <li><a href="#">lnk 3</a></li>
          <li><a href="#">lnk 4</a></li>
          <li><a href="#">lnk 5</a></li>
          <li><a href="#">lnk 6</a></li>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>

</section>