Positioning

Part 1

In the previous exercise, we used floats to put elements side by side. In certain situations, relative- and absolute-positioning.

  1. The first thing we do is define the "origin point" for our absolutely-positioned elements. Since .section is our primary content div, target .section and set it to position:relative;. Now positioned-elements inside .sections will, by default, start in their upper-left corner.
  2. First lets make a place for our sub-navigation: add a statement to your .section rule that adds a fairly large left margin (150px).
  3. The in-page navigation (ul#sub-nav) is marked up an unordered list with same-page anchor-links in it. Start the rule by removing the bullets, then set it to position:absolute;. The sub-nav should get pulled out of the document flow and land in the space you made for it.

Part 2

  1. Using the logic from Part 1, target the image below and position it out in the left-column. Remember that position:absolute; can take top and leftvalues.

Nashville Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in dolore deserunt mollit animreprehenderit in dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia sunt in culpa qui officia deserunt mollit anim id est laborum. In reprehenderit in voluptate velit esse cillum id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Part 3

  1. position:fixed; is different and simpler than postion:absolute;: elements will be pulled out of the document flow and be positioned according to the browser window, now matter what elements they are nested in. Use position:fixed; to target the footer on this page and attach to the bottom left corner of the browser. Add a background color and use a fixed width to ensure the type is legible.