Displaying list items side by side

Stanton_Roux
Stanton_Roux used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
try with overflow scroll...

Author

Commented:
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
Sr. Systems Engineer
Top Expert 2009
Commented:
As long as you limit the width of the div it's going to push the list down instead of to the right:


.showcaseNav
{
    float: right;
    width:150px; <-- THIS NEEDS TO BE WIDER
    padding-left:10px;
   
}

Commented:
... 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?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial