CSS Positioning - Activity

Instructions:

Create a file called positioning.html and a file called positioning.css.

Using HTML/CSS, create the layout shown on the screen.

For reference, the colors used on the screen are #eee and #999.

For further reference, you can generate paragraphs of lorem ipsum text using http://www.lipsum.com/feed/html. You need to make this page scroll to see how the fixed position element behaves.

Solution

<!-- Positioning Activity Solution (HTML) -->

<!doctype html>
<html lang="en-us">

<head>
  <meta charset="UTF-8">
  <title>Positioning</title>
  <link rel="stylesheet" type="text/css" href="positioning.css">
</head>

<body>
  <!-- Fixed div -->
  <div id="fixed">
    &lt;div&gt;<br> position: fixed
  </div>

  <!-- Wrapper -->
  <div class="wrapper">
    <!-- Content Section -->
    <section id="content">
      <!-- Heading 1: The Most Important Headline -->
      <h1>Heading</h1>

      <!-- Some body copy -->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a hendrerit ex, at blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus felis sem, non pulvinar odio fermentum vel. Nunc varius tempus scelerisque.
        Curabitur congue magna vitae velit dictum, eu finibus neque bibendum. In hac habitasse platea dictumst. Aliquam fermentum lobortis felis, in feugiat diam congue ac. </p>

      <!-- relatively positioned div -->
      <div id="relative">
        &lt;div&gt;<br> position: relative

        <!-- a div positioned absolutely in the relative div -->
        <div id="absolute">
          &lt;div&gt;<br> position: absolute
        </div>
      </div>

      <!-- Continue body copy -->
      <p>Nulla tempor ornare diam, vitae volutpat erat bibendum eget. Nunc sagittis placerat velit sit amet interdum. Nam in iaculis purus, quis tristique velit. Cras ut nisl vitae orci malesuada placerat non sed magna. Nulla ultrices, dolor at aliquam volutpat,
        lorem magna pharetra arcu, eget feugiat nisi libero at nunc. Phasellus finibus elit at sapien vehicula varius. Maecenas in dapibus leo. Aliquam molestie vulputate metus. Morbi sed posuere quam, et sodales felis. Proin augue nulla, pellentesque
        at venenatis vel, sagittis eget nibh. Maecenas libero velit, luctus eu velit vitae, eleifend convallis felis.</p>

      <p>Nullam imperdiet vehicula dolor eu consectetur. Vestibulum pulvinar lobortis accumsan. Phasellus lobortis pulvinar augue, eu ultrices dui. Donec ut est erat. In facilisis tellus nibh, eu consequat diam commodo a. Nam egestas sapien nunc, ullamcorper
        semper odio feugiat non. Duis et nisl leo. Aliquam consectetur vestibulum turpis. Vivamus non elit ut lorem mattis iaculis. Suspendisse ullamcorper ante orci, et condimentum nisi pharetra id. Praesent ut erat in eros mollis interdum quis ut nisi.
        Etiam ac risus in erat imperdiet sagittis eu sed metus. Etiam molestie ipsum sed vehicula efficitur. Cras eu metus in ex vehicula sodales.</p>

      <p>Maecenas feugiat, ex quis hendrerit interdum, felis ante laoreet sem, vitae tincidunt diam lectus fringilla dolor. Nunc vitae dui sed ligula pharetra sagittis in nec ante. Sed consequat congue vehicula. Donec vel risus at sapien rhoncus consequat
        a lobortis lorem. Mauris ut sem massa. Curabitur ac consequat eros. Nulla non nibh eros. Donec porta condimentum nisi a iaculis. Sed sit amet risus at lacus suscipit accumsan sed ullamcorper lorem. Proin sed egestas risus. Sed egestas ex ac finibus
        ornare.</p>

    </section>
  </div>
</body>

</html>

* {
  box-sizing: border-box;
}

body {
  font-size: 24px;
  line-height: 32px;
  color: #333;
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 40px;
  margin: 0;
  text-align: center;
  background: #eee;
}

.wrapper {
  width: 600px;
  padding: 20px;
  margin: 0 auto;
}

h1 {
  margin-bottom: 20px;
  font-size: 36px;
  line-height: 45px;
}

p {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 28px;
}

#relative {
  position: relative;
  height: 200px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
  background: #eee;
}

#absolute {
  position: absolute;
  right: -30px;
  bottom: 0;
  width: 250px;
  padding: 20px;
  text-align: center;
  background: #999;
}