course-info/examples/css/positioning/layout_2column.html at master · dat310-spring21/course-info · 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Example: 2-column layout using absolute positioning</title>
    <style>
        * {
            margin: 0px;
        }

        header {
            background-color: #ebde52;
            height: 80px;
        }

        nav {
            width: 20%;
            padding-top: 20px;
        }

        main {
            position: absolute;
            top: 80px; /* same as the height of header */
            left: 20%; /* same as the width of nav */
            width: 80%;
            padding-top: 20px;
        }

        p {
            margin: 1em;
        }
    </style>
</head>
<body>

<header>
    <h1>2-column layout</h1>
</header>

<nav>
    <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
    </ul>
</nav>

<main>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus, ipsum at tristique mollis, nunc nisi congue
        tortor, sit amet fermentum metus dui eu enim. Pellentesque in finibus augue. Integer lacus lacus, elementum sed
        pretium a, accumsan vel elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
        himenaeos. Vestibulum facilisis volutpat justo, sed congue lorem malesuada eu. Nunc iaculis tellus mi, in accumsan
        diam ullamcorper at. Ut ac magna in lorem egestas consectetur. Curabitur et pretium turpis, nec posuere nunc.
        Quisque sem arcu, aliquet ac feugiat a, dapibus sed mauris. Nullam non augue non ligula dapibus venenatis. Aenean
        vestibulum lacus eget magna pulvinar, elementum sagittis nisl rutrum.</p>

    <p>Aenean vestibulum libero pretium faucibus tempus. In a mattis nunc. Duis ultricies, velit quis viverra ultricies,
        augue lorem laoreet risus, sit amet gravida purus justo fringilla ante. Donec mi lorem, accumsan vel neque in,
        elementum pellentesque nulla. Nulla cursus diam sed dolor dignissim lacinia. Aenean vehicula massa purus. Phasellus
        efficitur leo id ex scelerisque euismod. Morbi dictum fermentum dictum.</p>

    <p>Quisque aliquet, orci at pharetra faucibus, nunc massa vulputate sem, varius dignissim nunc orci ut neque. Integer
        elementum mi a odio molestie, eu placerat leo dapibus. Etiam eu tincidunt nunc. Donec laoreet blandit metus at
        auctor. Sed dignissim blandit lorem. Morbi rhoncus odio turpis, at vestibulum neque aliquam eu. Proin malesuada
        ultricies imperdiet. Vivamus semper pretium orci, eu viverra sapien euismod quis. Fusce molestie rhoncus nulla, in
        euismod massa dapibus vitae.</p>

    <p>Sed mattis facilisis porta. Suspendisse potenti. Maecenas sit amet elementum lorem, id viverra sem. Donec placerat
        egestas pellentesque. Nunc nisi sem, lobortis quis interdum et, interdum ac libero. Vivamus non rutrum est. Cras
        commodo justo lorem, non vehicula neque pellentesque et. Donec ullamcorper diam eget mi facilisis tempus. Quisque
        dapibus condimentum mi.</p>

    <p>Phasellus turpis erat, rhoncus ac justo sit amet, ultrices vestibulum turpis. Pellentesque est enim, ultricies vel
        tristique sit amet, sagittis vitae enim. Nam condimentum orci a ipsum elementum malesuada. Proin sed orci eu ipsum
        egestas bibendum et lobortis justo. In in nulla mattis magna mollis pulvinar quis eget lacus. Suspendisse eu justo
        ipsum. Fusce ornare ligula eu orci porttitor, imperdiet mattis nisl tincidunt.</p>
</main>

</body>
</html>