How can I position my footer correctly using CSS?

Could someone please help me position my footer correctly in my webpage?

I have the following layout:

enter image description here

This is how I want the footer to behave:

The footer should be positioned at the bottom of the page when the content is empty.
The footer should be 'pushed' down when the content exceeds the height of the page.

here is my HTML:

<html>
    <head>
        <title>@ViewBag.Title</title>
    </head>

<body>

/* This is outside of the container as I want the background 
   to stretch across the top of the webpage */
<div id="menu">
    <div>
       /* This contains an unordered list which is restyled as a series of links.
          The reason it is contained in inside the menu div is because I want this
          content to be centred. /*
    </div>
</div>

<div id="page-container">

        <div id="header">
            <h1>Website title</h1>
        </div>

        /* This is floated to the left of the content area. */
        <div id="content">
            @RenderBody()
        </div>

         /* This is floated to the right of the content area. */
        <div id="sidebar">
            @RenderSection("sidebar", false)
        </div>

</div>

<div id="footer">
    My footer content goes here.
</div>

Please note the following:

The content and header is contained in a 'Div' called 'page-container'.
The content is made up of two Divs which are floated to the left and right of the content area.
The menu is outside of the page-container div. This is because I want the menu background to stretch across the top of the page (like the Stackoverflow menu)

I am aware that there are many similar questions on Stackoverflow and that a Google search will return a large amount of results.

The thing I have noticed whilst trying to adapt the samples I have found is that they usually depend on a very specific html structure (E.G. everything but the footer is in a container) that does not match mine. No matter what I try I end up with something that doesn't work (E.G. the footer is positioned below the screen bounds when the content is empty or is not moved down when the content exceeds the page).

Update

I can get my footer to stick to the bottom of the page but it is not pushed down when my content expands. I think this is because my content is made up of two floating elements.

Most people seem to be pointing me to tutorials they have found on Google (as already stated I have read most of these and already attempted to adapt them).

I have come to the conclusion that I am going to have to restructure my HTML to get this to work; the point of my question was how do I do this with the HTML I already have? So much for separation of concerns!

Solution

As mentioned in the edit to my post, I ended up having to alter my HTML slightly:

<body>
    <div id="page-container" >
        <div id="menu">
            <div>

            </div>
        </div>

        <div id="layout-container">

            <div id="header">
                <h1>Website title</h1>
            </div>

            <div id="content">
                @RenderBody()
            </div>

            <div id="sidebar">
                @RenderSection("sidebar", false)
            </div>

        </div>
    </div>

<div id="footer">

</div>

My CSS is based on CSS found here (This same link was posted by a couple of people but I was already using this anyway!)

The solution is about 99% effective. My footer sticks to the bottom of my page when the content area is empty and is also pushed down when the content grows larger than the screen but I now have a permanent scrollbar as my page height seems to be off (moving the mouse-wheel scrolls the page up and down by a single pixel).

I have so far been unable to get rid of this so I am begrudgingly accepting this as a complete solution unless anyone else can point me in the right direction.

Update

It seems the 1 pixel offset was caused by my footer having a 1 pixel top border. I simply adjusted my CSS to account for this and the scrollbar disappears when the content does not completely fill the screen.

#footer {
    margin-top: -151px;
    height: 150px;
}