Test example of CSS DIV layout_html/css_WEB-ITnose

最后显示效果如下图：

代码：

<% @ Page Language="C#" AutoEventWireup="true" CodeFile="SammyDiv.aspx.cs" Inherits="Buying_SammyDiv"  %>



< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > Sammy Test Div
     < style  type  ="text/css" >
        #rtop{}{       
        margin:0 auto;
        height:30%;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #CCCC00;
        }
        
        #rbottom{}{        
        margin:0 auto;
        height:70%;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #CCee00;
        }
        
        #left{}{        
        float:left;
        height:100%;
        width:50%;    
        vertical-align:middle; 
        text-align:center; 
        font-family:Arial; 
        font-size:x-large;   
        background: #CCCCed;
        }
        
        #container{}{        
        width:600px;  
        height:300px;   
        vertical-align:middle; 
        text-align:center; 
        font-family:Arial; 
        font-size:x-large;  
        background-color:Green
        }
        
        #leftside{}{
        width:20%;
        height:60%;
        float:left;
        font-family:Arial; 
        font-size:x-large;
        vertical-align:middle; 
        text-align:center;
        background: gray;
        }
        
        #rightside{}{
        width:80%;
        height:60%;
        float:left;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #Cdfd00;
        }
        
        #foot{}{
        height:20%;
        clear:both;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background-color:InactiveBorder;
        }
        #header{}{
        height:20%;
        clear:both;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background-color:Red
        }
       

    

< body >
     < form  id ="formtest"  runat ="server" >
     < div   id ="container" >
         < div  id ="header" >
            header   
        
         < div  id ="midbody" >
           < div  id ="leftside" >
            leftside
          
           < div  id ="rightside" >          
              < div  id ="rtop" >
                right top
             
              < div  id ="rbottom" >
                  < div  id ="left" >
                    left
                 
                  < div  id ="right" >
                    right
                 
             
          
        
         < div  id ="foot" >
            foot