-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
72 lines (52 loc) · 2.24 KB
/
index.html
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<head>
<title>Fixed Sidebars</title>
<style>
* {
box-sizing:border-box;
}
header {
background:grey; /* why not */
height:50px;
}
.wrapper {
width:70%; /*why not */
height:1000px; /* ensure a scroll */
margin: 10px auto; /* center it */
background:
-webkit-linear-gradient(top, blue, #bada55); /* something funky */
background:
-moz-linear-gradient(top, blue, #bada55); /* something funky */
background:
linear-gradient(top, blue, #bada55); /* something funky */
}
.sidebar {
position:fixed; /* don't you move */
top:70px;
width:14%;
background:lightblue;
padding:5px;
}
.left {
left:1%;
}
.right {
left:85%; /* 1% (start) + 14 (width) + 70 (main width) */
}
</style>
</head>
<body>
<header>
</header>
<div class="wrapper">
</div>
<div class="sidebar left">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="sidebar right">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</body>
</html>