3-3关于右侧定位的一点问题

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
        margin:0;
        padding:0;
    }
    .header{
      background-color:black;
        width:100%;
        top:0;
        position:fixed;
        height:80px;
        min-width: 800px;
     
    }
    .logo{
        float:left;
    }
    .header img{
        height:80px
    }
    .nav{
        float:right;
        line-height:80px;
    }
    li{
     display:inline;
        padding:0 20px;
    }
    a{
        color:white;
    }
    .header a:hover{
        color:orange;
        
    }
    .container{
        background-color:#ececec;
        height:1000px;
        top:80px;/*这里设置距离顶部的距离 但是似乎没有用 还是用最上部开始*/
        margin:80px 0px;/*marginy有用top bottom没用为什么呢？*/
        min-width: 800px;
        padding:0px 220px 0px 200px;
    }
    .footer{
        height:80px;
       background:black;
        min-width: 800px;
        bottom:0;
        width:100%;
        position:fixed;
        line-height:80px;
        text-align:center;
    }
    .middle,.right,.left{
        float:left;
        min-height:300px;
        position:relative;
    }
    .middle{
        background-color:#CC99CC;
        width:100%;
  
    }
    .left{
        width:200px;
        background-color:#FFFF99;
        margin-left:-100%;
        left:-200px;
      
    }
    .right{
         width:220px;
        margin-left:-220px;  
        right:-220px;
/*       margin-left:-220px; 
       margin-right:-100%;*/
        
 

        background-color:#66FFFF;

    }
    
        .login-buttom{

        color:white;
        background-color:red;
        text-align:center;
    }
    input{
        margin:10px 0px;
        height:25px;
        width:80px;
    }
    form{
        padding:10px;
    }
        .left a{
       
        margin-right:10px;
        background-color:orange;
    } 
    .middle img{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        width:200px;
        height:200px;
    }

  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="header">
      <div class="logo">
      <a>
         <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
      </a>
      </div>
      <div class="nav">
          <ul><!--当宽度不够的时候 导航条会被排挤下来异位 但是下部导航条又不会有这个情况-->
            <li><a href="#">课程</a></li>
            <li><a href="#">职业路径</a></li>
            <li><a href="#">实战</a></li>
            <li><a href="#">猿问</a></li>
            <li><a href="#">手记</a></li>
          </ul>
      </div>
  </div>
  <div class="container">
      <div class="middle">
          <img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/>
      </div>
      <div class="left">
                      <dl>
                <dt>推荐课程</dt>
                <dd><a>职业路径</a>html and css3</dd>
                <dd><a>职业路径</a>android</dd>
                <dd><a>职业路径</a>ios</dd>
                <dd><a>职业路径</a>php</dd>
                <dd><a>职业路径</a>java</dd>
            </dl>
      </div>
      <div class="right">
                         <form>
                <h2>登录</h2>
                <div><input type="text" name="username" placeholder="请输入登录邮箱/手机号">
                <div><input type="password" name="password" placeholder="6~16位密码，区分大小写，不能用空格"></div>
                <div><input type="submit" value="登录" class="login-buttom"></div></div>
            </form>
      </div>
  </div>
  <div class="footer">
          <ul>
        <li><a href="#">企业合作</a></li>
        <li><a href="#">人才招聘</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">讲师招募</a></li>
        <li><a href="#">常见问题</a></li>
    </ul>
  </div>
</body>
</html>

问题1：用下图图似乎也能达到效果这样可以么？和老师方法比有什么区别？