Building grid that doesn't wrap at window borders...

[RIRedinPA]

I'm trying to build a grid to display data but I keep running into a problem in all browsers where the "cells" wrap when they reach the window's right edge, I want them to just go off on into ad infinitum...

 

My page is laid out this way:

 

<div id="main">
   <div id="content">
      <div id="headers">
          <ul id="h1r1">
            <li class="item"><div id="h1item">Stuff goes here</div></li>
            <!--...many more <li>-->
         </ul>
      </div>

      <div id="group1">
          <ul id="g1r1">
            <li class="item"><div id="g1r1i1">Stuff goes here</div></li>
            <!--...many more <li>-->
         </ul>

         <ul id="g1r2">
            <li class="item"><div id="g1r2i1">Stuff goes here</div></li>
            <!--...many more <li>-->
         </ul>
      </div>

   </div><!--end content-->
</div><!--end main-->

 

and the relevant css

 

* { 
border: 0px;
margin: 0px;
padding: 0px;
}

html {
background-color: #eee;
}

body {
font-size:100%;
}

#main { 
position: absolute; 
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

#content { 
position: relative; 
left: 100px; 
top: 70px;
height: 60%;
overflow: scroll;
padding-right: 16px;
}

#content ul { 
list-style-type: none;
background-color: #fff;
}


#content li.item {
float: left; 
width: 120px;
min-height: 25px;
max-height: 25px;
background-color: #fff;
border: 1px solid black;
}