| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <title>Special Layout</title> |
| <style type="text/css"> |
| html, body { |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| padding: 0; |
| } |
| body { |
|
|
| } |
| #wrapper { |
| position: relative; |
| top: 10%; |
| margin: 0 auto; |
| width: 80%; |
| min-width: 400px; |
| height: 80%; |
| background: #000; |
| } |
| #left { |
| float: left; |
| position: relative; |
| width: 200px; |
| height: 100%; |
| margin-right: -200px; |
| background: blue; |
| overflow: hidden; |
| } |
| #right { |
| position: relative; |
| width: auto; |
| height: 100%; |
| background: green; |
| margin-left: 200px; |
| overflow: hidden; |
| } |
| #lefttop { |
| width: 100%; |
| height: 100px; |
| background: red; |
| } |
| #leftbottom { |
| width: 100%; |
| background: #0ff; |
| height: auto !important; |
| height: 9999px; |
| } |
| #left>#leftbottom { |
| position: absolute; |
| top: 100px; |
| bottom: 0; |
| } |
| #righttop { |
| width: 100%; |
| height: 100px; |
| background: #f0f; |
| } |
| #rightbottom { |
| width: 100%; |
| background: #ff0; |
| height: auto !important; |
| height: 9999px; |
| } |
| #right>#rightbottom { |
| position: absolute;; |
| top: 100px; |
| bottom: 0; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="wrapper"> |
| <div id="left"> |
| <div id="lefttop">lefttop</div> |
| <div id="leftbottom">leftbottom</div> |
| </div> |
| <div id="right"> |
| <div id="righttop">righttop</div> |
| <div id="rightbottom">rightbottom</div> |
| </div> |
| </div> |
| </body> |
| </html> |
