i'm stuck because if you look at http://ap-gfx.com the listing text is not staying in the listing container. and the http://ap-gfx.com/article/id/4 and the nav is not staying at the top of the page.

In what browser ?

mozilla firefox

Get that clear:both OFF of the .listing class, that is an ineffective way to clear floats and the list items aren't floated anyway.

The text inside .info is wrapping because the text is too wide for the 540px you've specified, AND you've nailed down the height of the box in .listing to only 100px. Where did you think the text was going to go ???

Take the 20px margin OFF of #listcontainer, it's making it too wide for the nav box to go where you want it. #listcontainer is 800px, nav is 200px - -then you add in 40px of margins. Take that clear: both off of the nav container too.. it is not the right place for it.

The clearing element needs to go after the last floated box and before your footer.

Oh, and get rid of those horrible <font> tags and use CSS to style your text.