在线求助:怎样用DIV+CSS实现网页排版!!!(谢谢!!!)
现在有一段简单的HTML代码: 
  <html>  
  <head>  
  <style   type= "text/css "   media= "screen ">  
 div.f1oat   { 
       float:   left; 
       } 
  </style>  
  </head>  
  <body>  
  <div      class= "float ">    <a   href= "# "> AAAA </a>  </div>  
  <div      class= "float ">    <a   href= "# "> BBBB </a>  </div>  
  <div      class= "float ">    <a   href= "# "> CCCC </a>  </div>  
  <div      class= "float ">    <a   href= "# "> DDDD </a>  </div>  
  <div      class= "float ">    <a   href= "# "> EEEE </a>  </div>  
  <div      class= "float ">    <a   href= "# "> FFFF </a>  </div>  
  </body>  
  </html>  
 这段代码的显示结果是AAAA-FFFF在网页上左对齐显示成一排,现在我想让DDDD-FFFF显示在AAAA-CCCC的右边,并且和AAAA-CCCC之间留有部分间隔,最终的显示效果如下:   
 AAAA      DDDD 
 BBBB      EEEE 
 CCCC      FFFF   
 请问高手CSS该如何写呢?   谢谢!!! 
 我对CSS几乎不懂!!!   
------解决方案--------------------小测试了一下.应该是语法错误,逻辑上也有点错.我将调试代码贴出来,希望有所帮助. 
  <html>  
  <head>  
  <style type= "text/css " media= "screen ">    
 div#float { 
    float:left; 
   } 
  </style>  
  <title> CSS </title>  
  </head>  
  <body>  
  <div id= "float ">    <a href= "# "> AAAA </a>  </div>  
  <div>    <a href= "# "> DDDD </a>  </div>  
  <div id= "float ">    <a href= "# "> BBBB </a>  </div>  
  <div>    <a href= "# "> EEEE </a>  </div>  
  <div id= "float ">    <a href= "# "> CCCC </a>  </div>  
  <div>    <a href= "# "> FFFF </a>  </div>  
  </body>  
  </html>