troubleshooting Question

Displaying list items side by side

Avatar of Stanton_Roux
Stanton_RouxFlag for South Africa asked on
CSSASP.NETjQuery
4 Comments1 Solution786 ViewsLast Modified:
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>



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;
    }

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;
   
}
/* 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;
   
}
ASKER CERTIFIED SOLUTION
Britt Thompson
Sr. Systems Engineer
Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros