Put Div into another if page view ends

So what I want is to have some tables like this

<ul>
<li>Some Text, Links whatever</li>
</ul>

ordered by the page view. So if the page ends (on the bottom) in the view I wanna have a new table on the right of the first like this:

<div class="left_1 table">
    <ul>
    <li>First Some Text, Links whatever</li>
    </ul>
</div>
<div class="left_2 table">
    <ul>
    <li>Second Some Text, Links whatever</li&g开发者_开发技巧t;
    </ul>
</div>

The CSS I think will be like this:

.table {
     float:left;
}

and so on. The full process I wanna realise with Jquery. I try it so say it in my syntax:

$('li').each(function () {
      if($this.isOutofBottomView) {
            $this.putIn.next('li');
      } else {
            // do nothing
      }
});

Thanks, I hope you know what I'm asking for :)

---

This will answer a lot of your questions about horizontal scrolling websites utilizing jQuery as well as some alternatives in the comments.

http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

---

I think I sort of understand. It doesn't help that you're using unordered lists and calling them tables though, or your seemingly inconsistent use of "page views".

It sounds like instead of wanting to list things vertically, you're trying to list them vertically to the bottom of the viewport (the current viewable area without the need for a scrollbar) and then place each subsequent series of links on the right side of the last. Is this correct?

---

I found a great soultion in HTML5 / CSS3 for this at html5rocks.com

-webkit-column-count: 2; 
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;