Main

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Make the following changes to the text below using TextWrangler. You may only edit the CSS.

  1. Change the size of the browser window to see the behavior of the elements on this page. Notice that the second paragraph has been been given a purple background and semi-transparency. It also has absolute positioning: it is being pulled out of the normal document flow, and its top and left coordinates (50 px each) refer to the upper-left corner of the browser window. Modify the CSS rule to position the purple p#second paragraph flush with the top of the browser window, but still 50px from the left edge.
  2. Write a CSS rule for p#first based on the one you have for p#second (just copy and paste). Give p#first a different background color and modify the rule to place it flush to the top right corner of the browser
  3. Now do the same procedure for p#third (give it another background color) and place its bottom left edge 10 px (both left and right) from the bottom left of the browser window
  4. Do the same procedure a last time for p#fourth (give it another background color) and place its bottom right edge 10 px (both left and right) from the bottom right of the browser window
  5. Now, with a single line of CSS, figure out how to make all the paragraphs get positioned with reference to the main (yellow) div, not the browser window. (Big hint: look at Exercise 6). Change the browser window size to confirm the paragraphs are attached to the main div.

First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph.

Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph.

Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph.

Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph. Fourth paragraph.