DIV fixed width and dynamic stretching hybrid horizontal arrangement, div stretching

DIV fixed width and dynamic stretching hybrid horizontal arrangement, div stretching

1.

 

 

2. Source Code

Html

<H2> 1. fixed head, tail stretch 
Css
<! -- Style --> <style type = "text/css">/* the width of the container is 100% */. container {width: 100%;}/** fixed width of the header div **/# div1. head {width: 200px; height: 100px; background-color: # 00F7DE; float: left;}/** auto-fill and stretch the tail div **/# div1. tail {width: auto;/** do not write width or auto **/height: 100px; margin-left: 200px; background-color: # FFB800 ;} /** fixed tail div width **/# div2. tail {width: 200px; height: 100px; background-color: # FFB800; float: right;}/** automatically fill and stretch the header div **/# div2. head {width: auto; height: 100px; margin-right: 200px; background-color: # 00F7DE ;}# div3. head {width: 200px; height: 100px; background-color: # 00F7DE; float: left} # div3. center {width: auto; height: 100px; background-color: #009f95; margin-left: 200px; margin-right: 200px;} # div3. tail {width: 200px; height: 100px; background-color: # FFB800; float: right ;}# div4 {position: relative ;}# div4. head {width: 50%; height: 100px; float: left ;}# div4. head. inner {height: 100px; background-color: # 00F7DE; margin-right: 100px;} # div4. tail {width: 50%; height: 100px; float: left ;}# div4. tail. inner {height: 100px; background-color: # FFB800; margin-left: 100px;} # div4. center {position: absolute; width: 200px; height: 100px; left: 50%; margin-left:-100px; background-color: #009f95 ;}</style>