Please see my comment to the question. Unfortunately, I praised your design prematurely. Actually, it's wrong from the very beginning; it just created the impression of something "almost correct".
Also, I cannot address you "blocking the end problem", because it's not clear. I can only see what I said in the comment, that the image after "follow then" is cut. Most likely, this is the same what you meant to describe.
I looked at your CSS and found what's going on. It's simple. You simply used a fixed positioning for the bottom ul element ("home", "about", etc.). This element
overlaps the rest of the page. It is not noticeable until you scroll down.
Nothing can fix this kind of design. When an element overlaps other elements, it will keep overlapping. To leave a room for this bottom part without overlaps, you have to use fixed
position for your top page as well (which could be a separate div). But then you have to calculate widths of the top and bottom portion, to make a perfect fit, and recalculate it when the browser height changes. This is fairly simple, but you would have to add some JavaScript (I don't know a solution without JavaScript).
I also advised to add non-scrollable top part. My idea is this: first, create CSS with zero padding and margin and create two parts. Then you can simply calculate required heights. The calculation should respond to change of browser window size (say, assign a handler to
window.onresize). Inside these two top-level horizontal bands, you can insert inner elements with required padding and margins.
You can find a sample of such design, in particular, in this article:
Modal Popup From Scratch (in the demo).
Few words on the design aspects. Do you know what is worst there? The 3-column design with huge empty space on left on right. Get rid of it. This is a common design mistake which really used to plaque many sites. Don't even think about leaving it this way.
—SA
Submit an article or tip