How to fix a footer overlay on main in HTML

Question 1

Firstly, it should be div id="left" in your html since in your css "#left" not ".left".

Secondly, what lee8oi said is true.You can try his method.

Thirdly, you also can applying this method jsfiddle by adding a new div (set display:inline-block) to wrap #left and #main by set "#left" as float:left and "#main" as float:right.

.wrapper
{
display:inline-block;
}

#main
{
background-color:yellow;
float:right;
}

#left 
{ 
float:left;
width: 178px;
background-color:blue;    
}

Addition: I'm just putting background-color to make clearer to you where the div is. Good Luck!!.

Question 2

Well one problem is that you can't 'position: absolute' and 'float: left' in the same element. They both position elements in different ways.

The answer to your question, I believe, would be CSS's 'display: inline-block'. Normally div's are not allowed to render side-by-side. Instead maybe you should try something like this:

<!doctype html>

<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <style>
        div.inline
        {
            color: red;
            display: inline-block
        }
        #main
        {
            border: 1px solid blue;
            width: 100%;
            height: auto;
        }
        #head {
            height: 100px;
            width: 100%;
            border: 1px solid green;
        }
        #left {
            width: 15%;
            min-height: 400px;
            border: 1px solid red;
        }
        #body {
            width: 84%;
        }
        #footer
        {
            padding: 10px;
            text-align: right;
            border-top: 1px dotted #8A8575;
            border-bottom: 1px dotted #8A8575;
            font-family: Constantia, Georgia, serif;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="head">
            The header
        </div>
        <div id="left" class="left inline">
        LEFT
        </div>
        <div id="body" class="inline">
             @RenderBody()
        </div>
        <div id="footer">
            built with <a target="_blank" href="http://asp.net/mvc"> ASP.NET MVC 4</a>
            <button style="margin-left: 25px; float:left">Slide Toggle</button>
        </div>
    </div>



</body>
</html>