Question

I have HTML content that generates a dynamic number of span elements with accompanying UL’s.
Due to how the spans & UL’s are generated they are written in a set order.

What I am looking to achieve is for each span to go across the top and then have the accompanying UL underneath it.

Here is the segment of HTML:

<div id="suggested" >                  
  [% FOR row IN suggestions  %]
  [% "<span>" row.0 "</span><div class="clear"></div><ul>" "" IF loop.first %]
  [% FOR u in row %]
  [% IF loop.index > 0  %]
    <li><a name="sugg" href='[% script_name %]/register?key=[% u %]' value="[% u %]">[% u %]</a>
      [% END %]
        [% "</ul>" IF loop.last %]                             
         [% END %]
          [% END %]
           </div>

and the CSS:

    #suggested 
{
  width:100%;
  height: 400px;
  display: block;

}

.clear {
 clear:both;   
}

#suggested ul
{
    display:inline-block;
    width: 20%;  
    list-style: none; 
    float:left;
    margin: 0 4px;
  padding: 0;
  text-align:left;
  overflow: hidden;

}
#suggested span {

    width: 20%;
    border-bottom: 1px #000 dotted;
    display:inline-block;

}
#suggested ul li:nth-child(2n+1) {
    background: #eee;
}

#suggested ul li 
{   

    width: 100%; 
    margin: 5px 0;
  padding: 2px;
  text-align:left;
  text-overflow: ellipsis;
  display: table;
  word-wrap: normal;
}

The output isn’t what I desire but instead the span elements float left to the UL but I want them to float left to the previous span element and have the UL associated with the span float left to the previous UL.

Thus forming something like:

<span><span><span><span><span>
 <ul>  <ul>  <ul>  <ul>  <ul> 

But as I’ve said, each span and UL pair are created in sequence.

Any ideas how I can achieve what I desire?

Answer 1

Is this the effect you are going for?

http://jsfiddle.net/meEMp/