Question

Have a look at the following jsFiddle:

http://jsfiddle.net/DNB9T/

how would you float the different ul li elements so they line up beside each other them move to the next line when they hit the right boundary?

Answer 1

Not entirely sure what you want to do, but you could do something like this

ul.sitemap > li{
    float:left;
    margin:1em;
    min-height:160px;
}

Example: http://jsfiddle.net/DNB9T/5/

Basically, float only direct children (first lis) of the ul.sitemap.

Add a margin to space them out.

Give it a min-height so the floated elements clear each other. I picked 160px, you may need to adjust.