csstdg5figs/10-floating-and-positioning/fixedpos-emulating-frames.html at main · meyerweb/csstdg5figs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Emulating frames with fixed positioning</title>
<style type="text/css">
body {background: black; color: silver;}  /* colors for safety's sake */
div#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;
  background: gray; margin-bottom: 2px; color: yellow;}
div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;
  background: silver; margin-right: 2px; color: maroon;}
div#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0;
  overflow: auto; background: white; color: black;}
</style>
</head>
<body>

<div id="header">header
<h1>masthead</h1>
</div>
<div id="sidebar">sidebar
<ul>
<li>linkone</li>
<li>linktwo</li>
<li>linkthree</li>
<li>linkfour</li>
<li>linkfive</li>
</ul>
</div>
<div id="main">main

<p>
Halle berry lectorum consequat lorem iusto legentis, accumsan chrissie hynde. Major everett molly shannon hendrerit claritatem. Ii arsenio hall margaret hamilton steve harvey. Independence bob hope illum te consuetudium indians playhouse square ipsum mutationem ipsum. Gates mills nisl patricia heaton bobby knight sollemnes, modo ad ghoulardi eleifend nibh don king hal holbrook. Me lew wasserman henry mancini parma william g. mather iriure roger zelazny typi, legunt mentor headlands dolor nam. Littera claritatem children’s museum ea nulla metroparks zoo, bay village mazim legere qui woodmere placerat. Processus valley view minim shaker heights amet nunc fred willard, ullamcorper et tincidunt omar vizquel lectorum. Severance hall investigationes pierogies typi. Lius decima qui vel. Mike golic consectetuer george voinovich tincidunt id est augue decima. Tim conway ex tremont ut.
</p>
<p>
Praesent lake erie chagrin falls township consequat. Commodo municipal stadium euismod eorum nunc duis. Gothica amet eros placerat videntur ad lorem clari, at laoreet. Lakewood facilisi futurum typi quod ruby dee qui putamus. Dennis kucinich north olmsted lebron james linndale. Ipsum ut vel dolore browns in soluta chagrin falls. Gund arena aliquip nostrud notare. Erat paul newman collision bend ipsum illum per. Iriure nonummy luptatum formas, in saepius.
</p>
<p>
Velit dolor quod sequitur euclid beach mark price. Quod esse middleburg heights molestie. Jesse owens ii screamin’ jay hawkins jacobs field. Aliquip mark mothersbaugh glenwillow duis urban meyer nulla legentis bob feller. Minim te warrensville heights zzril. Sequitur assum the flats, dolor.
</p>
<p>
Adipiscing bowling kenny lofton facit sammy kaye nam sit berea congue gothica suscipit amet. Eros cuyahoga river mirum ohio city. Nibh autem vero fiant est soluta, john w. heisman, squire’s castle, est anteposuerit etiam bob golic. Quam elit in dolor brecksville nonummy. Nihil pepper pike sed solon beachwood debra winger quam autem. Notare dolore legunt molestie bratenahl consectetuer feugait imperdiet volutpat highland hills lorem congue.
</p>
<p>
Vel litterarum toni morrison feugiat tracy chapman eric metcalf. Seacula anteposuerit eorum consuetudium, joel grey accumsan. Dorothy dandridge the innerbelt humanitatis humanitatis sam sheppard claritatem odio john d. rockefeller newburgh heights tempor nihil paul brown. Et augue nunc superhost richmond heights sit putamus facilisis. Michael stanley facilisis iis nobis. Quod claritas nunc quinta university heights in. Eum amet dolore lobortis consequat, cavaliers. Feugiat dolor legere option claram hendrerit typi per olmsted falls qui harvey pekar ex. Jerry siegel the gold coast andre norton investigationes, cleveland museum of art iis lebron departum arena depressum metro quatro annum returnum celebra gigantus strongsville dead man’s curve delenit. Adipiscing ut lorem cuyahoga valley cum lectores est nobis. In parum bedford nostrud burgess meredith, in quarta habent anne heche liber assum jim lovell. Cuyahoga heights dynamicus wisi insitam broadview heights lobortis insitam philip johnson.
</p>

</div>

</body>
</html>