Problem with css part

Hi,
how to adjust the css codes below

    <style type="text/css">
        #horizontalmenu {
          /*text-align: center;
          margin-left:120px;*/
          width:90%;
          margin:auto;
        }
        #horizontalmenu > ul {
          padding: 1px;
          margin: 1px;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu > ul > li {
            text-align: left;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }
        #horizontalmenu li ul {
            display: none;
            position: absolute;
        }
        #horizontalmenu li:hover ul {
            display: block;
            background: #7C7A82;
            height: auto;
        }
        #horizontalmenu li ul li {
            clear: both;
            border-style: none;
			width: 170px;
        }
        ul.main {
          width: 160px;
		  position: relative;
        }
        ul.main > li {
          line-height: 20px;
          background: #B849AE;
          color: white;
          box-sizing: content-box;
          padding: 10px;
        }
        ul.main li:first-child ul, 
        /*ul.main > li:hover ul {*/
        ul.main li.selected ul {
          display: block !important;
          z-index: 100;
        }
        ul.main li:first-child ul {
	        z-index: 10;
        }
        a {
          color: white;
        }
        ul.main ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
          width: 600px;
          background-color: #80D0D9;
          font-size: 0;
        }
        ul ul li {
          display: inline-block;
        }
        ul ul li img {
          width: 140px;
        }
    </style> 
    <div id="horizontalmenu">
        <ul class="main">
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict1.Text %> onclick="pict_click1();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label13" runat="server"><b>Test</b></label>
                                </div>
                                <!---span><%=lb_var1.Text %></span><br /--->
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label8" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict3.Text %> onclick="pict_click3();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label4" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label5" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6" runat="server"><b>TestII</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label7" runat="server"><b>TestII 2</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label9" runat="server"><b>TestII 3</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label10" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label11" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label12" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label14" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label15" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label16" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label17" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label18" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label19" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label20" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label21" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label22" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label23" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <br /><br />
    <asp:Repeater ID="Repeater" runat="server">
	    <HeaderTemplate>
	    </HeaderTemplate>
        <ItemTemplate>
		    <asp:LinkButton ID="Link1" runat="server" Text='<%# Eval("row1") %>' BackColor="#57789E" Width="820px" 
                ForeColor="White" Font-Bold="true" Font-Names="Arial" style="line-height:33px" 
                ToolTip="Double-click the line to locate to the record" OnClick="bt_Click" />
        </ItemTemplate>
	    <SeparatorTemplate>
	    </SeparatorTemplate>
	    <FooterTemplate>
		    <div class="headerFooter"></div>
	    </FooterTemplate>
    </asp:Repeater>
    <br />

Open in new window

to ensure the repeater above is aligned on the right of the TABs, of which each TAB is having a few sub-menu items? I expect that the TABs with sub-items are the green part below, while the reapeater is the blue part.

https://dl.dropboxusercontent.com/u/40211031/t850.png
LVL 11
HuaMin ChenProblem resolverAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Post the rendered HTML
0
HuaMin ChenProblem resolverAuthor Commented:
what do you mean? Thanks.
0
GaryCommented:
You've posted the .net code - post the rendered code as it appears in the View Source of the browser
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

HuaMin ChenProblem resolverAuthor Commented:
But I've already shown all the relevant codes within .aspx file.
0
GaryCommented:
You've posted some .net code and a nice picture of two boxes and a question that makes no sense in context
0
HuaMin ChenProblem resolverAuthor Commented:
Yes, I do expect to show the TABs on box 1 and the repeater on box 2. Is there any other help to this thread?
0
HuaMin ChenProblem resolverAuthor Commented:
I want to put the repeater at the position that is on right of the TAB menu. Is this unclear to what I expect to have?
0
GaryCommented:
Without the rendered HTML your question makes no sense.
0
HuaMin ChenProblem resolverAuthor Commented:
Sorry, I don't know what "rendered HTML" mean?
0
GaryCommented:
View source in the browser and post the relevant HTML.
0
HuaMin ChenProblem resolverAuthor Commented:
Hi,
But the codes above are already very clear and what I expect to see is, why the problem arises.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
HuaMinChen2, this is going around in the same circle as your previous question http:Q_28544457.html.   It may be very clear in your own mind, but we can't see that. This is  a front end issue just as your previous question is.   That means your asp code is not what we need to see.  What is required is the output it produces.  

If you need to hide some private info, that is understandable. Just spend some time and hide or disguise that data.   Until that happens, we can't help you with your css issues.  

Based on what we see is being output as HTML you may need to adjust your asp logic, but there is no way to know until you post the rendered html.
0
HuaMin ChenProblem resolverAuthor Commented:
Thanks. Here is the source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Refresh" content="120" /><title>
	Test
</title>
    <style type="text/css">
        body {
           padding-top: 100px;
           background-color: #4278A8;
        }
        * {
          padding: 0;
          margin: 0;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }

        #demo {
            margin: 30px 0 50px 0;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        }
    
        #demo .wrapper {
            display: inline-block;
            width: 180px;
            margin: 0 3px 0 0;
            height: 20px;
            position: relative;
        }
    
        #demo .parent {
            height: 100%;
            width: 100%;
            display: block;
            cursor: pointer;
            line-height: 30px;
            height: 30px;
            border-radius: 5px;
            background: #F9F9F9;
            border: 1px solid #AAA;
            border-bottom: 1px solid #777;
            color: #282D31;
            font-weight: bold;
            z-index: 2;
            position: relative;
            -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
            -webkit-transition-delay: .8s;
            text-align: center;
        }
    
        #demo .parent:hover,
        #demo .content:hover ~ .parent {
            background: red;
            -webkit-transition-delay: 0s, 0s, 0s;
        color:#fff
        }
    
        #demo .content:hover ~ .parent {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            z-index: 0;
        }
    
        #demo .content {
            position: absolute;
            top: 0;
            display: block;
            z-index: 1;
            height: 0;
            width: 180px;
            padding-top: 30px;
            -webkit-transition: height .5s ease;
            -webkit-transition-delay: .4s;
            border: 1px solid #777;
            border-radius: 5px;
            box-shadow: 0 1px 2px rgba(0,0,0,.4);
        }
    
        #demo .wrapper:active .content {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
        #demo .content:hover {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
    
        #demo .content ul {
            background: #fff;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    
        #demo .content ul a {
            text-decoration: none;
        }
    
        #demo .content li:hover {
            background: #eee;
            color: #333;
        }
    
        #demo .content li {
            list-style: none;
            text-align: left;
            color: #888;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            padding-left: 10px;
            border-top: 1px solid #ccc;
        }
    
        #demo .content li:last-of-type {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .button
        {
            background: url(/pict/app-spotlight.png);
            background-size: 36px 36px;
            background-repeat: no-repeat;
            background-position: 0px 2px; 
            cursor:pointer;
            border: none;
            width:36px;
            height:36px;
        }
        .body {
            background-color:#BBAEBF;
            font-family: 'Segoe UI';
        } 

        ul li a:hover {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .active {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .lb_reg
        {
            width: 36px;
            height: 30px;
            font-weight:bold;
        }    
        .lb_log{
            top: 30px;
            left: 1185px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
        }    
        .left {
             position:absolute;
             left:10px;
             border:Groove 1px #ccc;
             width:55px;
             right:10px;
        }

        .right {
             position:absolute;
             left:60px;
             border:none 1px #c00;
             width:65%;
        }
        img.background {
            position: absolute;
            z-index: -1;
            width: 100%;
            top: 0;
            left: 0;
        }
        #wowslider-container1 .ws_images{
	        position: relative;
	        left:0;
	        top:0;
	        width:100%;
	        height:100%;
	        overflow:hidden;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }
         .shadow {
             -moz-box-shadow: 0 0 5px #888;
             -webkit-box-shadow: 0 0 5px#888;
             box-shadow: 0 0 5px #888;
         }
        .dia {
            display:none;
        }
        .content {
            position: relative;
            width: 1220px;
            height: 780px;
            color:  #fff; /* Text color for content div. */
        }
        #wrapper {width: 1180px; margin-left: auto; margin-right: auto;}
        .topnav{ margin: 102px auto;
            width: 70%;
        }
        .dia {
            display:none;
        }

        #container{
            height:200px;
            background-color:black;
        }
        #horizontalmenu {
          /*text-align: center;
          margin-left:120px;*/
          width:60%;
          /*margin:auto;*/
          display:block;
          /*float:left;*/
        }
        #repcontainer {
            width:15%;
            display:block;
            float:left;
        }
        #horizontalmenu > ul {
          padding: 1px;
          margin: 1px;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu > ul > li {
            text-align: left;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

        #horizontalmenu li ul {
            display: none;
            position: absolute;
        }

        #horizontalmenu li:hover ul {
            display: block;
            background: #7C7A82;
            height: auto;
        }

        #horizontalmenu li ul li {
            clear: both;
            border-style: none;
			width: 170px;
        }
        ul.main {
          width: 160px;
		  position: relative;
        }
        ul.main > li {
          line-height: 20px;
          background: #B849AE;
          color: white;
          box-sizing: content-box;
          padding: 10px;
        }
        ul.main li:first-child ul, 
        /*ul.main > li:hover ul {*/
        ul.main li.selected ul {
          display: block !important;
          z-index: 100;
        }

        ul.main li:first-child ul {
	        z-index: 10;
        }

        a {
          color: white;
        }
        ul.main ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
          width: 600px;
          background-color: #80D0D9;
          font-size: 0;
        }
        ul ul li {
          display: inline-block;
        }
        ul ul li img {
          width: 140px;
        }

    </style> 
</head>
<body>
    <form method="post" action="./" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="_TSM_HiddenField_" id="_TSM_HiddenField_" value="ZaMfZ6yYhPPHZ1NeEf8j6-t902-6pHpn2MehV0eep-I1" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="CQtmMZpX4gCzia3zTbdRt8ZZI53myS7ZSD+Nk062m4iqRBh+bWRBrU1W4uczFI0QhjfDocTRTDVpl7k+HGNCUDKItPpGWJheyoAVq+5eR9QRqRevCsI8FunJiYnNA+E7B+xtOPwwFR4d/zC0zO1cNmjDOVc2O0Xz8gg0JwoscfjksvP+elcfMkEDZmob6XJcvRHiviMOHNH6UuJmJtOlRhGQhMIA+QrjHsgp+mvB9pfwB8ehBHl04Px7Rj8yDuGmPkRbiQHDORKPBCl8v0OJp+a/4SscpWC2u9O3EzDo6eOex4xdg6JVy9Q7Nkw6O/Im6e9bFitT1oTWgReNjsKhdWPZK++xZqUaQaZWzPogohoCNn8bKk9FSqD+KhSIjXFhDE6cqlqfd9qA/DbmAHVTftByBJjhfiHwew3fV+dfsCIDpLflKEEkf6WysctjBuMJJlX8750wb7kjGH6+9p0cnQ==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/Start/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZFMHky7-waqj18vFhp23U9ewBVIqV9r9rU1JAyizeMJ_lEH2N69uKKumMDzyD1TdHw2&amp;t=635418424260000000" type="text/javascript"></script>


<script src="/Start/ScriptResource.axd?d=x6wALODbMJK5e0eRC_p1LaNeQpnb_mrNlSBOpxnwoUOH2ouW076uIdZ6KmeUBHqXOdIT8dC2fKqlx4fDbJ6HsRJcFo85G6_JKLdtCBvpxmSr6GESXkFRwBnonrQv81Zl0&amp;t=ffffffffda74082d" type="text/javascript"></script>
<script src="/Start/ScriptResource.axd?d=P5lTttoqSeZXoYRLQMIScNkrFh9tnhyFns-1yXIrkVn3Y0ZYUujYkJUoOUui-Wu4R03BO1XbNXsiR6CPrJcOWtJu2MuDFS3bw9whEg-SzQHcnUXPAboOEighqa7pO9UA0&amp;t=ffffffffda74082d" type="text/javascript"></script>
<script src="/Start/default.aspx?_TSM_CombinedScripts_=True&amp;v=ZaMfZ6yYhPPHZ1NeEf8j6-t902-6pHpn2MehV0eep-I1&amp;_TSM_Bundles_=&amp;cdn=False" type="text/javascript"></script>
<script src="/Start/ScriptResource.axd?d=XGoPW3Unw0ILT0eb9sSUa93m2vF_PgIJ9qH_KK5Ed71MfMRAaalXlruh-SvVhLaNTwNDdFTEUUOKqtV5kqg_SuWJ7aQogBxVj7ws7pRQCs0bVZr-unciUfWjPZnDcjLkzKojJFD5u2H0j6nCkuPWpQ2&amp;t=ffffffffda74082d" type="text/javascript"></script>
<script src="/Start/ScriptResource.axd?d=uvA9ANM76Fbpm1FfUlagnX2IUZjvJzEwiK11efD0W9hRRzhN1KtPcorq0swMGmLfUQ8whq8NC37P4_RK9-GwnIbquHRveKJxC1Ks106veijeaN9nArOf6SyaGGELK4vdmYx9Sc_cNUQPKkVp0Kz3WQ2&amp;t=ffffffffda74082d" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
null;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="479C339B" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="ww9pkcYLfBQQju2CuNiwNwS+TNXI/t9/v0zl3l2uSE+2zPPLqfesrY6GXeWHbReDt2e/oB5Pf7UjwQ+2tx3ENVZAxs7nkBcyNhRVGJj+Dv4+GTq8gtkms6ORhKOUrvf00QXZCn1NID+Flh1T8Q+syBk4HwFcsx+Eadj9mbiQNYEDrVdepXWMhGTavXTpsIsFy7sCbQearJKaAHJXS/P+i7R6ToP3XCqgePQLv34p0jxzW/Dzk0RGU0n5xNyuezWTffL2W+Z3UcYbfkBiBzpxZ43mbTd5yVzTSfLsAtSBPoeJXXhuIiGjh19lwIVPllqlf3bojLGQUq28VdubaULdmashwrI7QvgVf/yESjCRvvnHzaEP9LoNjTPe3Oc5BiZddQurDFm9YwcEFizYnX/plYOrQ3SRTTz1DhFxy3gR3k9uVdt4RZPqZxijfgh2h81a7WPQUWamD2EHrU0HivFOb5O/wM2rXh/JFr532bUMP1fV5kfoUbgwj8rjr6ltNT3gWrYPn3ASpYjEsNfdpk30D/zH0A7TcdN9R1va2DxOT+lbnSZVrF94TxE8MuOduTDkqzPz2xgtZu4G0ZdNjFrBBjiYJuAE4VbeOic2pv98cSBcriDUmr6wZkYmCJWWeRPqf3BwaRw+HwHibm+/gXooR9wGE9wQRd2wBfL5tHMLzvH3ldOEFe/bn0l+bpdkm5R32iNETPpdwMfoyOkI5aQqgA==" />
</div>
    <div style="background-color:#8E6ACC; position: fixed;left: 0;top: 0; width: 100%; height:100px">
        <div style="position: fixed; left: 0; right: 0; width: 91%; height:80px; margin:auto;">
            <div style="position:absolute; width: 100px; top:5px; height: 30px; background-color: #8E6ACC; right: 0%;">
                <table width="100%">
                    <tr>
                        <td align="right" >
                            <a id="lb_reg" class="lb_reg" href="javascript:__doPostBack(&#39;lb_reg&#39;,&#39;&#39;)" style="color:White;font-family:Arial Unicode MS;font-size:10pt;font-weight:bold;">注册</a>
                               &nbsp;|&nbsp; 
                            <a id="lb_user_acc" class="lb_log" href="javascript:__doPostBack(&#39;lb_user_acc&#39;,&#39;&#39;)" style="color:White;font-family:Arial Unicode MS;font-size:10pt;font-weight:bold;">登录</a>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="background-color:#7BD4C9; position: fixed; left: 0; right: 0; top: 10px; border-radius:6px; width: 63%; height:67px; margin:auto;">
                <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl04', 'form1', [], [], [], 90, '');
//]]>
</script>

                <table width="100%">
                    <tr style="height:8px;"></tr>
                    <tr>
                        <td style="width:8px;" ></td>
                        <td align="left" >
                            <div style="background-color:#9FC2CC; left:0; width: 60%; border-radius:11px;" >
                                <span id="Label2" style="display:inline-block;color:#F0B411;font-family:Arial Unicode MS;font-size:16pt;font-weight:bold;width:3px;"></span>
                                <span id="Label1" style="color:#F0B411;font-family:Arial Unicode MS;font-size:19pt;font-weight:bold;">楼盘快速搜索</span>
                                <input name="tb_searchtext" type="text" id="tb_searchtext" style="color:#5637D4;background-color:White;font-family:Arial Unicode MS;font-size:13pt;font-weight:bold;width:280px;" />
                                <input type="hidden" name="TextBoxWatermarkExtender3_ClientState" id="TextBoxWatermarkExtender3_ClientState" />
                                <span id="Label3" style="display:inline-block;color:#F0B411;font-family:Arial Unicode MS;font-size:19pt;font-weight:bold;width:1px;"></span>
                                <input type="button" name="bt_search" onclick="" class="button"/>
                            </div>
                        </td>
                        <td >
                            <div style="background-color:white; width: 14.5%; border-radius:4px;" >
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:8px;" ></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="horizontalmenu">
        <ul class="main">
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click1();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label13"><b>Detail</b></label>
                                </div>
                                <input name="tb_p1_desc2" type="textbox" id="tb_p1_desc2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span></span><br /--->
                                <input name="butt_p1" type="button" id="butt_p1" onclick="openPopup();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label8"><b>Detail</b></label>
                                </div>
                                <input name="tb_p2_desc" type="textbox" id="tb_p2_desc" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="butt_p2" type="button" id="butt_p2" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click3();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label4"><b>Detail</b></label>
                                </div>
                                <input name="Textbox1" type="textbox" id="Textbox1" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button1" type="button" id="Button1" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label5"><b>Detail</b></label>
                                </div>
                                <input name="Textbox2" type="textbox" id="Textbox2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button2" type="button" id="Button2" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6"><b>DetailII</b></label>
                                </div>
                                <input name="Textbox3" type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button3" type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label7"><b>DetailII 2</b></label>
                                </div>
                                <input name="Textbox4" type="textbox" id="Textbox4" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button4" type="button" id="Button4" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label9"><b>DetailII 3</b></label>
                                </div>
                                <input name="Textbox5" type="textbox" id="Textbox5" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button5" type="button" id="Button5" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label10"><b>Detail</b></label>
                                </div>
                                <input name="Textbox6" type="textbox" id="Textbox6" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button6" type="button" id="Button6" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label11"><b>Detail</b></label>
                                </div>
                                <input name="Textbox7" type="textbox" id="Textbox7" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button7" type="button" id="Button7" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label12"><b>Detail</b></label>
                                </div>
                                <input name="Textbox8" type="textbox" id="Textbox8" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button8" type="button" id="Button8" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label14"><b>Detail</b></label>
                                </div>
                                <input name="Textbox9" type="textbox" id="Textbox9" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button9" type="button" id="Button9" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label15"><b>Detail</b></label>
                                </div>
                                <input name="Textbox10" type="textbox" id="Textbox10" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button10" type="button" id="Button10" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label16"><b>Detail</b></label>
                                </div>
                                <input name="Textbox11" type="textbox" id="Textbox11" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button11" type="button" id="Button11" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label17"><b>Detail</b></label>
                                </div>
                                <input name="Textbox12" type="textbox" id="Textbox12" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button12" type="button" id="Button12" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label18"><b>Detail</b></label>
                                </div>
                                <input name="Textbox13" type="textbox" id="Textbox13" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button13" type="button" id="Button13" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label19"><b>Detail</b></label>
                                </div>
                                <input name="Textbox14" type="textbox" id="Textbox14" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button14" type="button" id="Button14" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label20"><b>Detail</b></label>
                                </div>
                                <input name="Textbox15" type="textbox" id="Textbox15" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button15" type="button" id="Button15" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label21"><b>Detail</b></label>
                                </div>
                                <input name="Textbox16" type="textbox" id="Textbox16" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button16" type="button" id="Button16" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label22"><b>Detail</b></label>
                                </div>
                                <input name="Textbox17" type="textbox" id="Textbox17" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button17" type="button" id="Button17" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label23"><b>Detail</b></label>
                                </div>
                                <input name="Textbox18" type="textbox" id="Textbox18" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button18" type="button" id="Button18" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="repcontainer">
        
	        
		        <a id="Repeater_Link1_0" title="Double-click the line to locate to the record" href="javascript:__doPostBack(&#39;Repeater$ctl01$Link1&#39;,&#39;&#39;)" style="display:inline-block;color:White;background-color:#57789E;font-family:Arial;font-weight:bold;width:820px;line-height:33px">太古城一期三座</a>
            
	        
		        <a id="Repeater_Link1_1" title="Double-click the line to locate to the record" href="javascript:__doPostBack(&#39;Repeater$ctl03$Link1&#39;,&#39;&#39;)" style="display:inline-block;color:White;background-color:#57789E;font-family:Arial;font-weight:bold;width:820px;line-height:33px">太古城一期三座4A室</a>
            
	        
		        <a id="Repeater_Link1_2" title="Double-click the line to locate to the record" href="javascript:__doPostBack(&#39;Repeater$ctl05$Link1&#39;,&#39;&#39;)" style="display:inline-block;color:White;background-color:#57789E;font-family:Arial;font-weight:bold;width:820px;line-height:33px">太古城一期三座4B室</a>
            
	        
		        <a id="Repeater_Link1_3" title="Double-click the line to locate to the record" href="javascript:__doPostBack(&#39;Repeater$ctl07$Link1&#39;,&#39;&#39;)" style="display:inline-block;color:White;background-color:#57789E;font-family:Arial;font-weight:bold;width:820px;line-height:33px">太古城一期三座4C室</a>
            
	        
		        <a id="Repeater_Link1_4" title="Double-click the line to locate to the record" href="javascript:__doPostBack(&#39;Repeater$ctl09$Link1&#39;,&#39;&#39;)" style="display:inline-block;color:White;background-color:#57789E;font-family:Arial;font-weight:bold;width:820px;line-height:33px">太古城一期三座4D室</a>
            
		        <div class="headerFooter"></div>
	        
    </div>
    <span id="lb_msg" style="color:#E01B84;font-size:Large;"></span>  
    <br />
    <span id="lb_pict1" class="dia" style="color:DarkBlue;font-family:Times New Roman;font-size:11pt;font-weight:bold;"></span>
    <span id="lb_pict2" class="dia" style="color:DarkBlue;font-family:Times New Roman;font-size:11pt;font-weight:bold;"></span>
    <span id="lb_pict3" class="dia" style="color:DarkBlue;font-family:Times New Roman;font-size:11pt;font-weight:bold;"></span>
    <span id="lb_pict4" class="dia" style="color:DarkBlue;font-family:Times New Roman;font-size:11pt;font-weight:bold;"></span>
    <span id="lb_pict5" class="dia" style="color:DarkBlue;font-family:Times New Roman;font-size:11pt;font-weight:bold;"></span>
    <span id="lb_pict6" class="dia" style="color:DarkBlue;font-family:Times New Roman;font-size:11pt;font-weight:bold;"></span>
    
    
    

<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.TextBoxWatermarkBehavior, {"ClientStateFieldID":"TextBoxWatermarkExtender3_ClientState","WatermarkText":"NotShown","id":"TextBoxWatermarkExtender3"}, null, null, $get("tb_searchtext"));
});
//]]>
</script>
</form>
</body>
</html>

Open in new window

0
GaryCommented:
Even with your HTML I still have no idea what you are wanting.
0
HuaMin ChenProblem resolverAuthor Commented:
when running the page, the repeater now is not shown on the right of TABs. this is the problem.
0
GaryCommented:
Your original question said you wanted it to the right.
Where should it be?
0
HuaMin ChenProblem resolverAuthor Commented:
I expect repeater to be shown like
https://dl.dropboxusercontent.com/u/40211031/t850.png

and to the above, the green one is having TABs inside, while blue one having repeater inside.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
This is very confusing.  

How does this
squarestranslate to the visual output of the code you provided.  
site screenshot
It looks like you have the gray area as a nested ul from an li parent in the vertical menu. Is that supposed to fly out on hover or click?  

Is the gray area in your coding supposed to represent the blue box in your diagram?  Is the green box in your diagram supposed to represent the vertical menu?
0
slightwv (䄆 Netminder) Commented:
HuaMinChen,

Sometimes a more realistic picture is better.  Take a screenshot of your web browser, paste it into Paint or similar program and move the objects where you want them.

Based on what I think you want, is this is it:
pic
0
HuaMin ChenProblem resolverAuthor Commented:
Thanks all.
Scott,
OK, the highlighted area in bottom-left corner below, is the repeater list
https://dl.dropboxusercontent.com/u/40211031/t852.png

and I do expect it to be shown in the empty red area on the right. how to adjust the codes above?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Part of the issue here is the code is not valid.   Paste your rendered code http://validator.w3.org/ and check out the errors.

Assuming you make no changes to the code, the cheating way would be to move the div#repcontainer to after the closing form tag.  Then add css to float it right and a negative top margin.
#repcontainer{
  float:right;
  margin-top:-250px;
}

Open in new window

If it were me, I would clean up the code to validate. It looks like there are some closing tags missing and once fixed, this cheating solution may not work.

The the gray area (nested UL) is static, I would also remove it from the vertical  navigation and simply make it nested divs.  You can float the divs left and give them some margin and you are good.
<div id="middle">'
   <!-- start repeating div box -->
    <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6"><b>DetailII</b></label>
                                </div>
                                <input name="Textbox3" type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button3" type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
        <!-- end repeating div box -->
 <!-- start repeating div box -->
    <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6"><b>DetailII</b></label>
                                </div>
                                <input name="Textbox3" type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button3" type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
        <!-- end repeating div box -->
 <!-- start repeating div box -->
    <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6"><b>DetailII</b></label>
                                </div>
                                <input name="Textbox3" type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button3" type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
        <!-- end repeating div box -->
</div>

Open in new window

Your end result would look like this
<div id="header"></div>
<div id="container">
       <div id="left_nav_verticle"></div>
        <div id="middle_repeating_divs"></div>
     <div id="right_content"></div>
</div>

Open in new window

If you stick with that, it will be much easier. Inside the container, you can float each child div to the left and give it some right margin.
That is basically what any of the css grids do.  You might want to think about using a grid like http://getbootstrap.com/ or http://foundation.zurb.com/ to make your life easier.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
HuaMin ChenProblem resolverAuthor Commented:
where is the relevant css codes, to the codes below?

<div id="header"></div>
<div id="container">
       <div id="left_nav_verticle"></div>
        <div id="middle_repeating_divs"></div>
     <div id="right_content"></div>
</div>

Open in new window

0
HuaMin ChenProblem resolverAuthor Commented:
do you know, what I need is, to re-position the whole repeater list into the empty area highlighted above (within my last screenshot)?
0
HuaMin ChenProblem resolverAuthor Commented:
Any other help?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>where is the relevant css codes,
That is just a suggested skeleton layout.

Below is how I would achieve this using bootstrap.  The css in the style tag I added only to show visually what is going on. I wouldn't use that for production.  

http://jsbin.com/wutuya/1/edit 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

  <style>
  #header{height:60px;background-color:purple;color:white}
  #left_nav_verticle{background-color:violet;}
  #middle_repeating_divs{background-color:gray;}
  #right_content{background-color:blue;color:gray;}
  .box{text-align:center;background-color:#999;border: 1px solid rgba(86,61,124,.2);}
  </style>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="header">header</div>
<div id="container" class="row">
  <div id="left_nav_verticle" class="col-xs-3">
    <!-- place your left navigation here -->
    left
  </div>
  <div id="middle_repeating_divs" class="col-xs-6">
     <!-- place your repeater here -->
     <!-- simulate repeater -->
    <div class="col-xs-4  box">box</div>
    <div class="col-xs-4 box">box</div>
    <div class="col-xs-4 box">box</div>
    <div class="col-xs-4 box">box</div>
    <div class="col-xs-4 box">box</div>
    <div class="col-xs-4 box">box</div>
  </div>
  <div id="right_content" class="col-xs-3">
     <!-- place your right side content here -->
    right
  </div>
</div>
</body>
</html>

Open in new window


http://getbootstrap.com/ and the examples http://getbootstrap.com/getting-started/#examples and how to
0
HuaMin ChenProblem resolverAuthor Commented:
Sorry, using these codes
    <style type="text/css">
        #container{
            height:200px;
            background-color:black;
        }
        #horizontalmenu {
          /*text-align: center;
          margin-left:120px;*/
          width:60%;
          /*margin:auto;*/
          display:block;
          float:left;
        }
        #repcontainer {
            width:15%;
            display:block;
            float:left;
        }
        #horizontalmenu > ul {
          padding: 1px;
          margin: 1px;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu > ul > li {
            text-align: left;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

        #horizontalmenu li ul {
            display: none;
            position: absolute;
        }

        #horizontalmenu li:hover ul {
            display: block;
            background: #7C7A82;
            height: auto;
        }

        #horizontalmenu li ul li {
            clear: both;
            border-style: none;
			width: 170px;
        }
        ul.main {
          width: 160px;
		  position: relative;
        }
        ul.main > li {
          line-height: 20px;
          background: #B849AE;
          color: white;
          box-sizing: content-box;
          padding: 10px;
        }
        ul.main li:first-child ul, 
        /*ul.main > li:hover ul {*/
        ul.main li.selected ul {
          display: block !important;
          z-index: 100;
        }

        ul.main li:first-child ul {
	        z-index: 10;
        }

        a {
          color: white;
        }
        ul.main ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
          width: 600px;
          background-color: #80D0D9;
          font-size: 0;
        }
        ul ul li {
          display: inline-block;
        }
        ul ul li img {
          width: 140px;
        }
      #header{height:60px;background-color:purple;color:white}
      #left_nav_verticle{background-color:violet;}
      #middle_repeating_divs{background-color:gray;}
      #right_content{background-color:blue;color:gray;}
      .box{text-align:center;background-color:#999;border: 1px solid rgba(86,61,124,.2);}
    </style> 
    ...
    <div id="container" class="row">
    <div id="left_nav_verticle" class="col-xs-3">
        <ul class="main">
            <li>
                <a href="#">热门消息</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict1.Text %> onclick="pict_click1();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label13" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="tb_p1_desc2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span><%=lb_var1.Text %></span><br /--->
                                <input type="button" id="butt_p1" onclick="openPopup();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label8" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="tb_p2_desc" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="butt_p2" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict3.Text %> onclick="pict_click3();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label4" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox1" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button1" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label5" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button2" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">租房</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6" runat="server"><b>照片描述II</b></label>
                                </div>
                                <input type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label7" runat="server"><b>照片描述II 2</b></label>
                                </div>
                                <input type="textbox" id="Textbox4" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button4" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label9" runat="server"><b>照片描述II 3</b></label>
                                </div>
                                <input type="textbox" id="Textbox5" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button5" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label10" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox6" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button6" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">买房</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label11" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox7" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button7" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label12" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox8" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button8" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label14" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox9" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button9" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label15" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox10" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button10" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">超值租房</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label16" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox11" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button11" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label17" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox12" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button12" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label18" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox13" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button13" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label19" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox14" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button14" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">超值买房</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label20" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox15" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button15" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label21" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox16" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button16" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label22" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox17" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button17" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label23" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox18" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button18" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="middle_repeating_divs" class="col-xs-6">
        <asp:Repeater ID="Repeater" runat="server">
	        <HeaderTemplate>
	        </HeaderTemplate>
            <ItemTemplate>
		        <asp:LinkButton ID="Link1" runat="server" Text='<%# Eval("row1") %>' BackColor="#57789E" Width="820px" 
                    ForeColor="White" Font-Bold="true" Font-Names="Arial" style="line-height:33px" 
                    ToolTip="Double-click the line to locate to the record" OnClick="bt_Click" />
            </ItemTemplate>
	        <SeparatorTemplate>
	        </SeparatorTemplate>
	        <FooterTemplate>
		        <div class="headerFooter"></div>
	        </FooterTemplate>
        </asp:Repeater>
    </div>
    </div>
    ...

Open in new window


I still get the same problem like
https://dl.dropboxusercontent.com/u/40211031/t853.png
0
HuaMin ChenProblem resolverAuthor Commented:
Any other help?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.