| |
<!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> |
