DevDocs/Layout: std-vertical.html

File std-vertical.html, 1.8 kB (added by Jouni Koivuviita, 11 months ago)

Vertical OrderedLayout? implemtation proto for standards compliant browsers.

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html>
4<head>
5<title>Layout Proto - vertical in standards compliant browsers</title>
6<style type="text/css">
7body, html {
8        height: 100%;
9        background: white;
10        margin:0;
11}
12</style>
13</head>
14<body>
15
16<div style="background:#d5dae4; position:relative; height:100%; width:100%;overflow:hidden;">
17 <div style="position:absolute; top:15px; bottom: 15px; background: #fff; left:18px; right:18px;">
18  <div style="background:#7988a8; position:absolute; top:0; height:33.3%; overflow:hidden; width:100%;">LoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoreLoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoreLoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoreLoreLoremLoremLoreLoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lore</div>
19  <div style="background:#2f4071; position:absolute; top:33.3%; height:33.3%; overflow:hidden; width:100%;">Dolor sit amet</div>
20  <div style="background:#091e58; position:absolute; top:66.6%; bottom:0; overflow:hidden; width:100%;"><button>Click Me</button></div>
21 </div>
22</div>
23
24</body>
25</html>