leftMenu and sticky footer

HTML & CSS
1

The page at http://dot.kr/joon/048sundy/?view=menu has leftMenu in yellow
Since the leftMenu has the style “z-index;1”;, some right part of it covers the contents in pink and the last leftMenu is vertically below the “footer”.
when a user see the last leftMenu, the sticky footer is not on the bottom of the browser.

I like to make it like the follow.
The last leftMenu is not vertically below the “footer”.
but the last leftMenu is hidden because it is under the “footer”.
When a user want to see the last leftMenu, she or he can use the scrollbar which is shown between header and footer like seeing the last part of the contents in pink at http://dot.kr/joon/048sundy/.
The sticky footer always shown on the bottom of the browser.
Thank you very much in advance.

2

I like to describe more for clearing what I want.
The page at http://dot.kr/joon/049moon/?view=menu&c=1 is good as long as both top of the left menu in yellow and top of contents in red are horizontally same each other.
However if you, with your mouse, make the browser narrower horizontally, the contents in red will be dropped compared with the leftMenu in yellow.
I like to make it not to drop although the browser is being narrower.
Instead of being dropped, as the browser is narrowed, the left-end part of the contents in pink is being hidden under the right-end part of the left menu in yellow.

3

As I got no answer for this post, I found something wrong or poor in my explanation for what I want.
The page at http://dot.kr/joon/049moon/?view=menu&c=1 is good as long as both top of the left menu in yellow and top of the contents in red are vertically same level at just below the header in gray background.
However if you, with your mouse, make the browser narrower horizontally, the contents in red will be dropped instead of folded with the leftMenu in yellow.
Instead of being dropped, as the browser is narrowed, I like to make it the left-end part of the contents in pink is being hidden under the right-end part of the leftMenu in yellow.
I like to make the leftMenu in yellow and the contents in pink are being folded each other like at http://dot.kr/joon/048sundy/?view=menu.
However the sticky footer at http://dot.kr/joon/048sundy/?view=menu is not always shown on the bottom of the browser.

I like to make it like the following.
The sticky footer is always is on the bottom of the browser.
AND
the left-end part of the contents in pink is being hiddern under the right-end part of the leftMenu in yellow as the browser is, with your mouse, being narrowed horizontally.

4

Hi,

On this page you will need to make the width of those floated blocks fluid so that they can compress otherwise they will just drop.



.screen1,.screen{
width:49%;
max-width:500px;
overflow:hidden;
word-wrap:break-word;
}