keeping html lists ul / li inside asp.net contentplaceholder

Question

Having some problems with this. Im using c# code to bind files in a directory into an asp.net repeater .. and that's working but my problem is not there (I think).. It may with with CSS or just the nature of the ul.

Why does my list run past the set masterpage content page area?

my content page:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<div>
 <ul id="pg">
<ASP:Repeater id="repeater1" runat="Server" >
 <ItemTemplate>  
<li> <img src='<%#DataBinder.Eval(Container.DataItem,"n1") %>'> </li>
 </ItemTemplate>  
 </ASP:Repeater>    
 </ul>
 </div>
</asp:Content>

The CSS:

#pg {  width: 1200px; background: white; }
#pg li {  list-style: none; width: 200px; height: 200px; overflow: hidden; float: left; z-index: 2; opacity: .8; }
#pg li.active { opacity: 1; }
#pg li.selected { opacity: 1; z-index: 99; -moz-box-shadow: 0px 0px 10px #fff; -webkit-box-shadow: 0px 0px 10px #fff; }
#pg li img { display: block; width: 100%; }
#pg li p { color: white; margin: 10px 0; font-size: 12px; }

the jquery (note there is no styling in jphotogrid.js .. so won't list that here.

$(document).ready(function(){

    $('#pg').jphotogrid({
        baseCSS: {
            width: '175px',
            height: '175px',
            padding: '5px'
        },
        selectedCSS: {
            top: '50px',
            left: '250px',
            width: '700px',
            height: '700px',
            padding: '5px'
        }
    });

});

my rendered markup:

    <div>
    <div>
     <ul id="pg">
    <li> <img src='products/r/1.JPG'> </li>
    <li> <img src='products/r/127-2800_IMG - Copy (5).JPG'> </li>
    <li> <img src='products/r/127-2800_IMG - Copy (6).JPG'> </li>

    .. like 100 more of these many more of these

    <li> <img src='products/r/127-2800_IMG - Copy (7).JPG'> </li>
   </ul>
    </div>
    </div>
    <div>
    some text from my master page that follows the content page but is being 
    stepped on by ul/li content.
    </div>

I tried wrapping in span. looked at the CSS. wondering if this is native behavior and how I can address it.

Answer 1

When you specify a float:left, the element is taken out of the normal page flow and thrown to the left.

As a result, you have your list of li building up but it goes past the content area of the master page because it no longer cares about it.

Are you trying to get the master page's following contents to appear below the items? If so, add this:

<div style="clear:both;">&nbsp;</div>

after the </ul></div>