CSS：表到的div somekind的

Question

這就是我想要的......但我怎麼能建立這個使用CSS和DIV的？ 我試過很多教程，但它並沒有進一步就比這

body { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 13px; 
    background: #F0F0F0; 
} 

#wrapper { 
    padding: 1px; 
    margin: 0 auto; 
} 

#wrapper:after { 
    content: "."; 
    display: block; 
    clear: both; 
    height: 0; 
    overflow: hidden; 
} 

#left { 
    float: left; 
    width: 200px; 
    background: white; 
    padding: 5px; 

} 

#content { 
    margin-left: 215px; 
    background: white; 
    padding: 5px; 
    padding-left: 10px; 
} 

Answer 1

這裏有一個小的演示：http://jsfiddle.net/32trY/56/。

我對<div class="wrap">有點矯枉過正，所以很抱歉。

HTML：

<div id="header"> 
    <div id="smallbox">Tiny Box</div> 
    <div id="headerMain">Header Part</div> 
</div> 


<div id="content"> 
    <div id="contentLeft"> 
     <div class="wrap"> 
      Left Thing 
     </div> 
    </div> 

    <div id="contentMain"> 
     <div class="wrap"> 
      The Content 
     </div> 
    </div> 
</div> 

CSS：

html, body { 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 

#header { 
    height: 100px; 
    width: 100%; 
    position: absolute; 
} 

#header #smallbox { 
    float: left; 
    background-color: rgb(255, 180, 180); 

    width: 100px; 
    height: 100%; 
} 

#header #headerMain { 
    background-color: rgb(255, 200, 200); 
    height: 100%; 
} 

#content { 
    height: 100%; 
} 

#content #contentLeft { 
    float: left; 
    background-color: rgb(180, 180, 255); 

    width: 100px; 
    height: 100%; 
} 

#content #contentMain { 
    background-color: rgb(200, 200, 255); 
    height: 100%; 
} 

.wrap { 
    padding-top: 100px; 
}