For this challenge, the first step I took was to set-up a base template with the initial HTML structure and CSS styling. I saved this pen in CodePen and can now fork from it for each individual challenge. From here, I started Challenge 1 by introducing the third div element with the same characteristics as the other two. I floated div1 to the left and div2/div3 to the right in order to get the base arrangement. However, div2 was touching the right-most side of the broswer, and the challenge called for div3 to be there. In order to swap them, I moved the HTML for div3 above that of div2. The last step was to add a 5px margin on the left side of div3 to add a gap between both boxes. Challenge complete.
From the template I added div3 with the same attributes as the others. I removed all float properties from the div class in order to get them to stack on the left side. I also added a display property of block to all div classes to ensure they would stay that way. To move div2 to the center, I set the margin property to 0px auto. To move div3 to the right, I used float: right. Challenge complete.
For this challenge, from the template, the first thing I did was nest the HTML for div2 inside of div1. This way div2 was already inside div1 and there wouldn't be any issues with a block display. From there, I set the margin for both div elements (div1 and div2) to have a margin of 0px auto, which centered div1 on the page and centered div 2 horizontally inside of div 1. To get div2 centered vertically inside of div1, I changed the margin to 50px auto. I then increased the height and width of div 1 to 200px and changed the background color to # 333. Challenge complete.
From the template, I changed both div1 and div2 to float: left, which made them sit next to one another. I then set div2 to have a position: relative, then used right: 50px and top: 50px to move it down and to the right in order to cover the bottom-right fourth of the div1 box. Since the position property inherently pulls the element into the z-index, div2 was already on top of div1. The last step was to change the background-color: # 333 to differentiate color. Challenge complete.
Immediately, I'll start by saying this may not be the cleanest solution, but it works. First, from the template, I added div3 and reset all floats. I then set div1 to float:right and div3 to float:left. Next, I set div2's marging: 0px auto, which centered it, but it was on the same horizontal plane as div1, not staggered half way down vertically. To ammend this, I set the top margin to 100px, but that pulled div1 down with it. As a workaround, I set div1's position: relative with bottom: 100px. This pushed it into the top right-hand corner.
For this challenge, I nested div2 and div3 inside of div1. I made div1 float:right, which pulled everything to the right side of the screen. I adjusted the dimensions of div1 to width: 400px height: 150px and changed to background-color: # 333 to provide contrast with the black boxes. Then, within div1, I made div3 float:right, positioning the box in the top right-hand corner. The box for div2 was already on the left side and in order to move it to the bottom left-hand corner, I applied position: absolute and top: 50 px. I used position: absolute to ensure that the text content from div1 would move to the top left-hand corner. To make sure that div2 stayed inside of div1, I set position:relative for div1. Though a bit of a workaround, to get div1 to the bottom right-hand corner of the page, I set top: 600px for div1 and adjusted the page height to 600px as well. Challenge complete.
For this challenge I nested div2 inside of div1 and removed all initial floats so both boxes were in the top left-hand corner. I then adjusted the dimensions of div1 to height: 200px / width: 200px and background-color: # 333 for contrast against the black box of div2. I then set div2 float:right / position: relative / top: 50px to move it to the bottom right-hand corner of div1. Challenge complete.
The execution of this challenge was exactly the same as the above, but I only used float:right for div2 to move it to the top right-hand corner of div1. Challenge complete.
For this challenge I nested div2 and div3 inside of div1. I then set div1 height:200px / width: 300px / background-color: # 333. To get div2 and div3 to move to where they needed to be I would need to use position: absolute, so I set div1 to position: relative. I then set div2 to position: absolute / top: 0 / left: 50px to have it move to the top-center of div1. I then set div3 to position: absolute / bottom: 0 / left: 50px to have it move to the bottom-center of div1. Challenge complete.
For this challenge I nested div2 and div3 inside of div1. I then set div1 to width: 400px / height: 150 px / background-color: # 333 for the appropriate dimensions and color. I then adjusted to margin: 25px auto to move it away from the top boundary and center it on the page. I also set position: relative in order to use position: absolute in div2 and div3, in order to keep them contained within div1. I then applied nearly itentical traits to div2 and div3: display: inline-block / position: absolute / top: 25px. This lined the boxes up in the middle horizontally and set them next to one another. I then applied left: 50px to div2 and right: 50px to div3 to stagger them in order to match the example. Challenge complete.
For this challenge, the first thing I did was to nest div2 inside of div1 and nest div3 inside of div2. I then adjusted the dimension of div1 to width: 200px / height: 400px and background-color: # 333 to make a tall, dark gray rectangle. I also set position: relative in order to use position: absolute for div2/div3 while keeping them contained within div1. I then div2's dimensions to height: 225px / width: 175px to make a black rectangle. I set position: absolute / bottom: 0 / right: 0 in order to make it flesh with the bottom right-hand corner of div1. For div3, I made it a slightly larger square with dimensions height: 125px / width 125px to more accurately reflect the composition of the example. I then set position: absolute / bottom: 10px / right: 10 px to move it the the bottom right-hand corner of div2, but with a slight padding between the edges. Challenge complete.
For this challenge, I forked from Challenge 11 and only changed the positioning elements of div2 and div3. For div2, I left bottom: 0 to keep it flesh with the bottom edge of div1. The make the right edge of div1 bisect div2, I set div2 to left: 100px. div3 looked like it's right edge was flesh with that of div1, but was bisected horizontally by the bottom edge of div1, so I set it's positioning to right: 87px / top: 162px. Challenge complete.
For this challenge I actually branched from Challenge 4 which was essentially the same layout but with three fewer div boxes. div2 was already set to position: relative / top: 50px / right: 50 px, which staggered it in front of div1, covering div1's bottom right-hand corner. For div3, div4, and div5, I replicated the coding, but increased each top and right property by 50 px, which caused a cascading effect across the screen. Then, I applied background-color: # 333 to div2 and div4 to replicate the color scheme. Challenge complete.
For this challenge I forked from Challenge 7 which had essentially the same layout, but on the left hand side of the screen. As div2 was already nested inside div1, all I had to adjust was div1 to float: right and div2 to float: left. This altered the div1 text, so I changed div2 to position:absolute, which allowed the text from div1 to stay in the top left hand corner. Challenge complete.
For this challenge I forked from Challenge 14, copying the HTML lines for div3 and div4. This challenge in particular required me to play with the position property a fair amount for each box. First, to get everything to line-up properly, I set div1, div2, and div3 to display: inline-block. This allowed all three bvoxes to be on the same horizontal plane. I then used position: relative on div2 and div3. I used left: 100px on div2, to move it further away from div1. I then used top: 150px on div3 to move it down the page, creating the necessary gap between it and div2. To move it closer to div1, I used right: 100px, leaving a small space between the two boxes. To get div4 in line with the bottom edge of div3, I used top: 50px, creating the necessary space between div4 and div1, rounding out the composition. Challenge complete.