html div分块布局,html之div切块式布局

body{

margin: auto;

width: 600px;

#max-width: 100%;

}

.header{

width: 100%;

height:30px;

background-color: blue;

}

.content{

width:100%;

height: 100px;

background-color: #f8f8f8;

}

.content-left{

float:left;

height:100%;

width:100px;

background-color: yellow;

}

.content-mid{

height:100%;

float:left;

width:200px;

background-color: green;

}

.content-right{

height:100%;

float:right;

width:300px;

background-color: #167676;

}

.footer{

width: 100%;

height: 50px;

background-color: gray;

}

I am Header

I am content left

I am content mid

I am content right

I am footer