im probably gonna get flack from some users for not doing enough research. However i have spent 2 days on this issue, and lack of "what to look for" is getting to me. Therefore i apologize to people if this question has been answered.

Im building a website for someone as a favor, and using a free template to do so:
<http://sg-layout.com/demo/Eve/subpage.html>

Here is my issue: On the link provided above, you will see 2 grid layouts next to each other on full screen, as you resize the window.... the left div (the one that says styles) goes ontop of the right div (style playground). This is perfect, however i wish to use the left div as a navigation menu. Which means it would be epic if it could move down as the user scrolls down the page. By applying the position:fixed, it will achieve this. However it overlaps, the right div, almost as if now the right div grid ignores its left div. I fixed this by applying a more fixed width for both div's instead of a fluid layout based on percentage. I also introduced float left and float right to each div.
however as i resize the screen it does begin to overlap, instead of the cool feature where the left div moves ontop of the right div. Most likely due to the fact i no longer use a fluid type layout.

Is there anyone that can show me a tutorial/previous-post on this issue? Im very new to fluid layouts, and i cant seem to get this working.
Once again my apologies for this extremely long explanation, I hoped by explaining what i've done so far, you could get an idea of some of the fixes i have attempted.

**SUMMARY**

If my explanation, is too messed up. heres a quick summary of what im trying to achieve:

* Div left moves down as user scrolls down page
* if user resizes screen (using it on a tablet of phone), the left div does not overlap, it simply moves on top or something like that.

thanx!