I used these elements and specified these styles to make this thing happen. I chose to use white text color because you can't see it if it's black. (duh). (When you write this make your actual description more meaningful...)
First, I created 3 divs in the HTML body ordered from top to bottom as such (div 1, div 3, div 2). I did this because as I use float, the comp is going to read and style them in the order listed in the HTML body. So when the 'float: right;' property is used, div 3 will stay the farthest right, while div 2 will take the closest non-occupied space (meaning, it will be just to the left of the last div that was floated right (div 3). All of the divs were styled with the same height, width, background color, and color. I also gave div 1 the property of display: inline-block. This allows the comp to treat this div in a way that does not take up it's normal width of the page (the whole width). Which then gives space for div 2 and 3. I also turned the default margin of the page to 0, which made the divs exactly on the edge of the window and then changed div 2's margin to 5px to separate it from div 3.
I created 3 divs (ordered from 1-3 respectively) in the HTML body so that they lined up accordingly in the window. I also changed the default margin to 0 so that we could again start from the edges. The first div was already in the correct place in the window. For Div 2, I gave properties of relative position so that it would move according to it's own original positioning. So that when I set margin: 0 auto (meaning top and bottom have margins of 0 and left and right are auto), the div would center in the window. It does this by sticking to its original width and then using equal space on both sides for margin.
#####Challenge 3
For this, I created 2 divs. In the CSS, I gave div1 a height and width of 200px, double the size of div2. I also gave a relative position to div1 so that I could then give it margin: 50px auto; in order to center it and move it from the top just a little bit. By doing this margin: 0 auto, the comp keeps the element the same width and gives it equal margins on both sides. For div 2, I kept it at width and height of 100px. I also gave it a relative position so that I could also set margin: 0 auto;. I then set bottom: 200px in order to push it into the center of div1. And also gave it a z-index of 1 so that it would sit in front of div 1.
#####Challenge 4
This one I did slightly differently. I nested div2 inside of div1 so that I could use position absolute on div2 and move it in relation to its parent element (div1). I set the body margin to 0 so that I could start from a better base point. Both divs are set to width and height of 100px and different colors in order to see them. div2 is where all of the magic happens. I set position to absolute as stated earlier. From this, I'm able to move the div around with top: 50px (or half of div1's height) and left: 50px (also half of div1's width).
#####Challenge 5
I made 3 divs for this challenge. I set the body margin to 0 again. The div selector has width and height at 100px again. But this time, I set position: relative to the div selector so that each box would move according to its original position (that being the stacked column). With this I floated the first div1 right so that it would sit on the other side of the window. Then I set div2 and div3 to display: block so that they would take up their own element lines and not interfere with div1. Both got the property of top: 100px so that they would move down accordingly (both contain the position: relative; property. And I gave div2 margin: 0 auto so that it would center in the window.
#####Challenge 6
[Challenge 6](