Avatar of Stanton_Roux
Stanton_Roux
Flag for South Africa asked on

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>

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

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

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

Open in new window

ASP.NETCSSjQuery

Avatar of undefined
Last Comment
ienaxxx

8/22/2022 - Mon
ienaxxx

try with overflow scroll...
Stanton_Roux

ASKER
Overflow scroll just creates a vertical scroll bar.
I will be doing the scrolling usng Jquery animate.

But The items are still displaying below each other not next to each other
ASKER CERTIFIED SOLUTION
Britt Thompson

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ienaxxx

... or you can use min-width, instead of width ...

the float: left is goung to send li items next to each other, doesn't it?
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23