| <?xml version="1.0"?> |
| <!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="application/xhtml+xml; charset=UTF-8" /> |
| <title>Box Model</title> |
| <style type="text/css"> |
| * { |
| -moz-box-sizing: border-box; |
| -webkit-box-sizing: border-box; |
| box-sizing: border-box; |
| } |
| |
| body { |
| overflow: hidden; |
| margin: 0; |
| padding: 0; |
| font-size: 1px; |
| } |
| |
| .header { |
| position: absolute; |
| left: 0; |
| top: 0; |
| z-index: 1; |
| width: 100%; |
| height: 100em; |
| padding: 10em; |
| background: #9c6; |
| } |
| |
| .footer { |
| position: absolute; |
| left: 0; |
| bottom: 0; |
| z-index: 1; |
| width: 100%; |
| height: 50em; |
| padding: 10em; |
| background: #9c6; |
| } |
| |
| .content { |
| position: absolute; |
| left: 0; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| padding: 110em 10em 60em 10em; |
| } |
| |
| .alpha { |
| position: absolute; |
| left: 0; |
| top: 0; |
| width: 200em; |
| height: 100%; |
| } |
| |
| .beta { |
| position: absolute; |
| left: 0; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| padding: 0 0 0 210em; |
| } |
| |
| .inner { |
| position: relative; |
| z-index: 1; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .alpha-inner, |
| .beta-inner { |
| position: relative; |
| overflow: auto; |
| z-index: 1; |
| width: 100%; |
| height: 100%; |
| border: 1px solid #999; |
| background: #fff; |
| } |
| |
| .text { |
| font: normal 11px/15px arial, sans-serif; |
| } |
| |
| /* buttons as list items */ |
| |
| |
| button { |
| display: block; |
| position: relative; |
| width: 100%; |
| margin: 0; |
| border: 0; |
| padding: 0; |
| text-align: left; |
| background: #fff; |
| font-size: 1px; |
| } |
| |
| * html button { |
| margin: 0 0 -1px 0; |
| } |
| |
| *|*::-moz-button-content { |
| postion: relative; |
| margin: 0; |
| padding: 0; |
| text-align: left; |
| } |
| |
| button::-moz-focus-inner { |
| margin: 0; |
| border: 0; |
| padding: 0; |
| text-align: left; |
| } |
| |
| button.selected { |
| color: white; |
| background: #316ac5; |
| } |
| |
| button div { |
| display: block; |
| position: relative; |
| width: 100%; |
| padding: 5px; |
| font: normal 11px/14px arial, sans-serif; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="header"> |
| <div class="text">Header</div> |
| </div> |
| <div class="content"> |
| <div class="inner"> |
| <div class="alpha"> |
| <div class="alpha-inner"> |
| <div class="text">Luckily, the bit of the broadcast is now missing from BBCs website and folks in Cornwall swear they saw Bigfoot and Jersey Devil run off with miles and miles of audio tape containing tapes of Steve Jobs talking about the new Video iPod while drunk on soju, the confession of the true JFK assassin, and a tripping Chief Justice Roberts talking about how “Green isn’t just a color, man, it’s an idea.”</div> |
| </div> |
| </div> |
| <div class="beta"> |
| <div class="beta-inner"> |
| <button><div>Item 1</div></button> |
| <button class="selected"><div>Item 2</div></button> |
| <button><div>Item 3</div></button> |
| <button><div>Item 4</div></button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="footer"> |
| <div class="text">Footer</div> |
| </div> |
| </body> |
| </html> |
