title: keeping html lists ul / li inside asp.net contentplaceholder
body: <p>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.</p>
  
  <p>Why does my list run past the set masterpage content page area?</p>
  
  <p>my content page:</p>
  
  <pre><code>&lt;asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"&gt;
  
  &lt;div&gt;
   &lt;ul id="pg"&gt;
  &lt;ASP:Repeater id="repeater1" runat="Server" &gt;
   &lt;ItemTemplate&gt;  
  &lt;li&gt; &lt;img src='&lt;%#DataBinder.Eval(Container.DataItem,"n1") %&gt;'&gt; &lt;/li&gt;
   &lt;/ItemTemplate&gt;  
   &lt;/ASP:Repeater&gt;    
   &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>#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; }
  </code></pre>
  
  <p>the jquery (note there is no styling in jphotogrid.js .. so won't list that here.</p>
  
  <p>$(document).ready(function(){</p>
  
  <pre><code>    $('#pg').jphotogrid({
          baseCSS: {
              width: '175px',
              height: '175px',
              padding: '5px'
          },
          selectedCSS: {
              top: '50px',
              left: '250px',
              width: '700px',
              height: '700px',
              padding: '5px'
          }
      });
  
  });
  </code></pre>
  
  <p>my rendered markup:</p>
  
  <pre><code>    &lt;div&gt;
      &lt;div&gt;
       &lt;ul id="pg"&gt;
      &lt;li&gt; &lt;img src='products/r/1.JPG'&gt; &lt;/li&gt;
      &lt;li&gt; &lt;img src='products/r/127-2800_IMG - Copy (5).JPG'&gt; &lt;/li&gt;
      &lt;li&gt; &lt;img src='products/r/127-2800_IMG - Copy (6).JPG'&gt; &lt;/li&gt;
  
      .. like 100 more of these many more of these
  
      &lt;li&gt; &lt;img src='products/r/127-2800_IMG - Copy (7).JPG'&gt; &lt;/li&gt;
     &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
      some text from my master page that follows the content page but is being 
      stepped on by ul/li content.
      &lt;/div&gt;
  </code></pre>
  
  <p>I tried wrapping in span. looked at the CSS. wondering if this is native behavior and  how I can address it. </p>