Displaying list items side by side

Hi There

I would like to display list items side by side.

The items must be displayed 2 by 2 until there is 4 rows then right the new records to the side of it

rec rec rec rec rec
rec rec rec rec rec
rec rec rec rec rec
rec rec rec rec rec

My problem is that I have created a LI thats displays inline with float left but when I have more than 8 records 4x2 then the rest of the records are written beneath it. So my div is expanding down not to the right.

I want to display 8 records on the screen then I am going to have a Jquery scroller to the left or right that will display the rest of the records.

ASPX

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="showcase.ascx.cs" Inherits="Controls_showcase" %>

 
<div class="showCaseWrapper">

    <div class="showcaseHeading">
        <h2><asp:Label ID="lblShowcase" runat="server">Showcase</asp:Label></h2>
    </div>

    <div class="clear"></div>
   <div class="showcaseContent">
     
      <div class="showcaseSlider"><asp:Literal ID="litContent" runat="server"></asp:Literal></div>
      
   </div>

   <div class="showcaseNav tabs">
	    
	    <ul class="nav tabs">
		    <li id="liShowcase" class="selected" runat="server">
                <asp:LinkButton ID="hpShowCase" class="lbNav"  runat="server" onclick="hpShowCase_Click" ><span></span><strong>Showcase</strong></asp:LinkButton>
            </li>
		    <li id="liDesign" class="" runat="server">
                <asp:LinkButton ID="hpDesign" class="lbNav"  runat="server" onclick="hpDesign_Click" ><span></span><strong>Design</strong></asp:LinkButton>
            </li>
		    <li id="liOutdoor" class="" runat="server">
                <asp:LinkButton ID="hpOutdoor" class="lbNav"  runat="server" onclick="hpOutdoor_Click" ><span></span><strong>Event</strong></asp:LinkButton>
            </li>
		    <li id="liPrint" class="" runat="server">
                <asp:LinkButton ID="hpPrint" class="lbNav"  runat="server" onclick="hpPrint_Click" ><span></span><strong>Print</strong></asp:LinkButton>
            </li>
		    <li id="liRadio" class="" runat="server">
                 <asp:LinkButton ID="hpRadio" class="lbNav"  runat="server" onclick="hpRadio_Click" ><span></span><strong>Radio</strong></asp:LinkButton>
            </li>
		    <li id="liTV" class="" runat="server">
                 <asp:LinkButton ID="hpTV" class="lbNav"  runat="server" onclick="hpTV_Click" ><span></span><strong>TV</strong></asp:LinkButton>
            </li>
            <li id="liDigital" class="" runat="server">
                 <asp:LinkButton ID="hpDigital" class="lbNav"  runat="server" onclick="hpDigital_Click" ><span></span><strong>Digital</strong></asp:LinkButton>
            </li>
	    </ul>
    </div>

 
</div>

Select all Open in new window

CS

private void PopulateData(IQueryable<XMLCampaign> CampaignData)
    {

       
        string strData = "";

        strData += "<ul class=\"ShowcaseTable\">";

       int iCounter = CampaignData.Count();

        foreach (var item in CampaignData)
        {
            string description = item.Client;

            strData += "<li class=\"ShowcaseCell\"><img  width=\"201px\" height=\"128px\" src=\"media/" + item.ThumbPicture + "\" alt=\"" + item.Client.ToString() + "\" title=\"" + item.Client.ToString() + "\"></a></li>";

           
        }


        strData += "</ul>";

        litContent.Text = strData;
    }

Select all Open in new window

CSS

/* ShowCase */


.showCaseWrapper
{
    width:660px;
    height:700px;
}
.showcaseHeading
{
}

.showcaseContent
{
    width:500px;
    height:600px;
    float:left;
    overflow:hidden;
}

.showcaseNav
{
    float: right;
    width:150px;
    padding-left:10px;
   
}

.lbNav
{
    
}

.showcaseSlider
{
   
    height:600px;
   
   
}


.ShowcaseTable
{
   
   height:600px;
   padding-left:10px;
   padding-bottom:20px;
   
}

.ShowcaseCell
{
   
    padding:10px;
    float:left;
    display:inline;
   
}

Select all Open in new window

/* ShowCase */


.showCaseWrapper
{
    width:660px;
    height:700px;
}
.showcaseHeading
{
}

.showcaseContent
{
    width:500px;
    height:600px;
    float:left;
    overflow:hidden;
}

.showcaseNav
{
    float: right;
    width:150px;
    padding-left:10px;
   
}

.lbNav
{
    
}

.showcaseSlider
{
   
    height:600px;
   
   
}


.ShowcaseTable
{
   
   height:600px;
   padding-left:10px;
   padding-bottom:20px;
   
}

.ShowcaseCell
{
   
    padding:10px;
    float:left;
    display:inline;
   
}

Select all Open in new window