友友们，初学者对于盒子问题希望大家能够帮助解惑一下！

这是别人做出来的效果

img


这是我做出来的效果

img

这是我编写的语言

<DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>4行3列title>
  <style>
     *{
     padding:0;
     margin:0;

     }

   #container{
                      width:1000px;
                     
                      margin:0 auto;
                     

                   }
  #header{
                 height:100px;
                 background:pink; 
                 margin-bottom:5px;

               }
 
#nav{
                 height:50px;
                 background:#6cc; 
                 margin-bottom:5px;
        }


  #main{
              height:500px;
              width:1000px;
              margin-bottom:5px;

            }

.aside{
           float:left;
           width:80px;
           height:500px;
           background:pink;
          }



#aside1{

        }




#content{
                fioat:left;
                width:830px;
                height:500px;
                margin-left:5px;
                background:#ccc;
              }


#aside2{
          
               margin-left:5px;  
   

            }


 #footer{
               height:30px;
               background:pink; 

            }

style>
 head>
 <body>
  <div id="container">
    <div id="header">div>
    <div id="nav">div>

    <div id="main">
      <div id="aside1" class="aside">div>
      <div id="content">div>
      <div id="aside2"  class="aside">div>
    div>

   <div id="footer">div>
  div>

 body>
html>

大家，我想请问一下
问题1：对于盒子aside1为什么和盒子content没有间隔？（我在content中设置了 margin-left:5px为什么没有效果呀？）
问题2：为什么盒子aside2跑到footer下左方去了？
问题3：该如何进行修改才能达到别人做出来的效果
/非常麻烦大话帮我看一下了，谢谢大家/

这道题，看着真费劲了，发送文件吧

其它先不说，58行float拼错了！


<DOCTYPE html>
  <html lang="en">
   <head>
    <meta charset="utf-8">
    <title>4行3列</title>
    <style>
       *{
       padding:0;
       margin:0;
   
       }
   
     #container{
                        width:1000px;
                       
                        margin:0 auto;
                       
   
                     }
    #header{
                   height:100px;
                   background:pink; 
                   margin-bottom:5px;
   
                 }
   
  #nav{
                   height:50px;
                   background:#6cc; 
                   margin-bottom:5px;
          }
   
   
    #main{
                height:500px;
                width:1000px;
                margin-bottom:5px;
   
              }
   
  .aside{
             float:left;
             width:80px;
             height:500px;
             background:pink;
            }
   
   
   
  #aside1{
   
          }
   
   
   
   
  #content{
                  float:left;
                  width:830px;
                  height:500px;
                  margin-left:5px;
                  background:#ccc;
                }
   
   
  #aside2{
            
                 margin-left:5px;  
     
   
              }
   
   
   #footer{
                 height:30px;
                 background:pink; 
   
              }
   
  </style>
   </head>
   <body>
    <div id="container">
      <div id="header"></div>
      <div id="nav"></div>
   
      <div id="main">
        <div id="aside1" class="aside"></div>
        <div id="content"></div>
        <div id="aside2"  class="aside"></div>
      </div>
   
     <div id="footer"></div>
    </div>
   
   </body>
  </html>