I have a large number of icons that must be placed in a tablular format, many columns wide and 2 rows high. The layout will be scrolled with js within a 'window'

My problem here is that I need the icons to be displayed like this, assuming the icons are arranged in alphabetical order:

 a  c  e  g  i  k  m  o
 b  d  f  h  j  l  n  p

They will come out of a database in order, I will loop through and add html as required. Now I can do this using a modulo in the loop and create two strings og HTML (upper and lower) and then print those out - but I need icons to be added on the fly via Ajax, so something that is order agnostic would be great.

I've looked at Flexbox (http://blog.isotoma.com/2010/08/css3-flexbox/) which seems to have what's needed with box-orient - but that works on a horizontal OR vertical basis, not both.

My simplified CSS and HTML:

    <div id="gamesWrapper">

                <div id="slider">
                    <!-- start game -->
                        <div class="gameItem highlevel">
                            <a href="#">a</a>
                        </div>
                     <!-- end game -->


                       <!-- start game -->
                        <div class="gameItem lowlevel">
                            <a href="#">b</a>
                        </div>
                     <!-- end game -->


                       <!-- start game -->

                        <div class="gameItem highlevel">
                            <a href="#">c</a>
                        </div>
                     <!-- end game -->


                       <!-- start game -->
                        <div class="gameItem lowlevel">

                            <a href="#">d</a>
                        </div>
                     <!-- end game -->


                       <!-- start game -->
                        <div class="gameItem highlevel">
                            <a href="#">e</a>
                        </div>
                     <!-- end game -->

                       <!-- start game -->
                        <div class="gameItem lowlevel">
                            <a href="#">f</a>
                        </div>
                     <!-- end game -->


                       <!-- start game -->
                        <div class="gameItem highlevel">
                            <a href="#">g</a>
                        </div>
                     <!-- end game -->


                       <!-- start game -->
                        <div class="gameItem lowlevel">
                            <a href="#">h</a>

                        </div>
                     <!-- end game -->
                </div>
            </div>

CSS:

 .gameItem {
    float: left;
    margin: 5px;
 }
 .gameItem .highlevel {

 }
 .gameItem .lowlevel{
    clear: left; /* what to use here as clear:left does not put this on the second row? */
 }

Obviously this must work in the evil IE - but i am willing to use a jquery plugin if required. I have not done any HTML5/CSS3 (or much HTML recently) so all suggestions welcomed.

.gameItem .lowlevel{
    clear: left; /* what to use here as clear:left does not put this on the second row? */
}

..this selector won't match the element. Should be :

.gameItem.lowlevel {} or plain .lowlevel {}

How about something like:

.gameItem {
            float: left;
            margin: 5px;
            width:20px;
            height:20px;
            border:1px dotted #ccc;
         }
         .gameItem.lowlevel {
            margin: 36px 0 0 -27px;
        }

Sorry - CSS selector was error was a copy/paste/edit error.

Thanks - your solution seems perfect. Now I feel foolish..

How about using display: inline-block instead of float for .gameItem? This would let you scrap .lowLevel with its margin finagling...

inline:block orders the elements as

 a  b  c  d  e  f  g
 h  i  j  k  l  m  n