CSS Layout Challenge 1608FE

160824_cssLayoutChallenge_1608.md

Challenge 1

In this challenge I wrapped block 2 and 3 in there one div so that I could move them to the right of the page by using float right and float left on block 1(to keep on left side of page). In order to get block 2 and 3 inline in the right order I used floats again (float left for block 2 and float right for block3). And then I put in a margin-right of 5px to create space between the block 2 and 3.

Challenge 1

--

Challenge 2

For this challenge we positioned all blocks as absolute to allow the blocks to go wherever on the page and disregard the normal flow. By giving block 2 and 3 a margin-left and margin-top we were able to move them on the page to their desired locations.

update I removed position: absolute from the 3 divs. Since divs are block level elements they take up the horizontal space around them so they fall one ontop of the other on the page. Therefore, I didn't have to give them any margin from the top and could just center div 2 with margin: auto and move div 3 to the far right by using margin-left: auto;

Challenge 2

--

Challenge 3

For this challenge we increased the size of block 1 to be twice the size of block 2. Then we positioned both blocks absolute so that they were taken out of the normal flow. Then used margins to center the smaller block in the larger block and center them on the page.

update I updated the position of the larger div to be position: relative and then centered it on the screen by using a margin: auto. To center the smaller div within the larger one, I used a position: absolute and since it was moving from it's relative position within the larger div I could use top and left to move the element to be centered using specific pixels.

Challenge 3

--

Challenge 4

For this challenge we made both blocks the same size. Then we positioned both blocks absolute so that they were taken out of the normal flow. Then used margin to move block 2 down and to the right.

update I updated both divs to have a position: relative. Using top and left I was able to move div2 from it's original inline-block location to overlap div 1.

Challenge 4

--

Challenge 5

For this challenge we positioned all blocks as absolute to allow the blocks to go wherever on the page and disregard the normal flow. By giving block 1 a margin-top we could move it to the right size of the screen. We gave block 2 a margin-left and margin-top to center it and then gave block 3 a margin-top to move it down but keep it on the left side of the screen.

update I updated all divs to use margin: auto and position: relative

Challenge 5

--

Challenge 6

For this challenge we wrapped all of the divs in a container. By giving the container a float left and margin-top 100% we were able to move it to the bottom right of the screen. All block divs have a position absolute to move them out of the normal flow so that they can flow on top of each other. Since I knew the height and width of the larger block I could move the smaller blocks into the correct positions using specific pixel margins.

update In order to keep div1 in bottom right of the screen when the page scales I used position: fixed with a bottom and right of 0px. I positioned div 2 and 3 absolutely inside of div1 applying top, left and right of 0 to move them in their correct corners.

Challenge 6

--

Challenge 7

In this challenge we made 2 squares, one large and one small. We positioned them both absolute to pull them out of the normal flow and then using margin we were able to position the smaller square in the bottom right corner of the larger square.

update I removed position absolute from the larger div and gave it a position relative and also made it a surrounding div around div 2. By using position absolute and bottom and right 0 on div 2 I was able to position div 2 at the bottom corner of it's surrounding div1.

Challenge 7

--

Challenge 8

In this challenge was the same as Challenge 7, we just changed the margin to margin-left to push the square from the bottom right corner to the top right corner.

update same update as in challenge 7

Challenge 8

--

Challenge 9

In Challenge 9 we made a tall rectangle and 2 smaller squares. We gave them all a position of absolute to pull them out of the normal flow. By giving box 2 and 3 a margin-left, it centered them at the top of the rectangle and then we gave box 3 a margin-top to push it down to the bottom directly under box 2.

update updated larger div1 to surround both div2 and 3 and gave it a position relative so that I could absolutely position div 2 and 3 inside of div 1.

Challenge 9

--

Challenge 10

This challenge was a similar approach to 10. By wrapping all of the divs in a container div we were able to center all elements on the screen. We changed the tall rectangle to be a wide rectangle using widths and heights and then gave box 2 and 3 the same margin-top to center them vertically in the rectangle and gave each a different margin-left them both the same distance, respective to their side, from the left and right edge.

update Similar update to Challenge 9, except I gav div 1 a margin auto to center it on the page.

Challenge 10

--

Challenge 11

This challenge was a similar to the last couple of challenges. Again, we used position absolute on all of the divs. We made div 1 a long rectangle, div 2 a smaller long rectangle and div 3 a square using different widths and heights. We also updated the background-colors so you could see them on top of each other. By using margins on div 1 and 2 we were able to position div 2 in the bottom right corner and div 3 with a slight margin from the bottom right corner.

update updated div1 to have a position relative and divs 2 and 3 to be absolutely positioned inside of div 1. Then, I gave both div1 and 2 bottom and right positioning to move them into the bottom right corner. Giving div3 a margin of 10px moved it up and to the left.

Challenge 11

--

Challenge 12

This challenge used the same general layout as Challenge 11. We updated the margins on divs 2 and 3 by increasing the pixels so that div 2 was moved left so that the left half of it was inside the large rectangle and the right half was outside. We did not change the margin top on div 2. For div 3 we only changed the margin top so that the top half was inside the large rectangle and bottom half was not.

update updated div1 to surround divs 2 and 3 and gave it a position relative. divs 2 and 3 were given a position absolute. div2 was moved to line up with the bottom of div1 with a bottom 0. Similarly div3 was aligned with the right of div 1 with a right 0. Both smaller divs were moved outside of the parent div by using a negative positioning from the bottom and right.

Challenge 12

--

Challenge 13

In this challenge we created 5 divs with the same height and width and all positioned absolute. We then alternated the colors from black to grey. After this we applied a margin to div2 through div5 starting with 50px on div 2 and increasing by 50px for each div after that so that each div would move the same distance from the last one successively.

update updated all of the divs to have a position: relative and moved them on-top of each other using bottom and left positioning.

Challenge 13

--

Challenge 14

This challenge re-used the code from Challenge 8. By wrapping the divs in a container we were able to float the two divs to the right of the screen together. We added a margin-top to div 2 to put it in the bottom left corner of the larger box

update updated div1 to surround div 2 and gave it a position of fixed to stick it in the corner of the screen with no margin. I absolutely positioned div1 inside of div1 and gave it a bottom of 0 so that it was in the bottom left of the surrounding div.

Challenge 14

--

Challenge 15

In Challenge 15 we created 4 divs. Div 1 and 4 have the same height, width and color and divs 2 and 3 have the same height, width and color. All divs are positioned absolute to take them out of the normal flow. From there we just had to add margins to push the divs around the screen. We gave div 4 a margin-top and margin-left which moved it down and to the right so that it was overlapping div 1 vertically but had white space in-between the two divs. On div 2 we just gave it a margin-left to keep it at the top of the screen and push it over the line up with the right of div 4. Div 3 was given a margin-top to keep in inline with the left of div 1 and the bottom of div 4.

update I surrounded all of the divs in a container with a position relative and set width and height. All divs are absolutely positioned within that container. div 2 and 4 were givena right of 0 to push them to the right edge of the container. div3 and 4 were given a bottom of 0 to put them at the bottom edge of the container.

Challenge 15

Challenge 2: refactor using margin: auto to control all 3 div's placement.

Challenge 3: position: absolute isn't a flexible or particularly maintainable approach here. Refactor to make this layout effective on different screen sizes, try not to use position: absolute. It's is a positioning tool that is fairly extreme and should be used sparingly, not as your go-to choice. Additionally, when you use position: absolute, you can use top, right, bottom, and left rather than margin (because you are referencing the top, right, bottom, and left sides of the wrapping element that is serving as the positioning context for the absolutely positioned element).

Challenge 4: So, a few things going on with this solution. 1) you don't need div1 to be absolutely positioned. It's already where it needs to be when it's in the normal page flow. 2) since it's absolutely positioned rather than use margin, use top and right to set the position of the div2. Right now, this implementation isn't showing that you truly understand how position: absolute works.

Challenge 5: refactor using margin: auto to control all 3 div's placement.

Challenge 6: this implementation pushes the divs all the way off the lower right corner of the browser window out of the viewable area, i had to scroll to find it. Rethink & refactor your approach, and, again, try to lean less heavily on position: absolute

Challenge 7: you have a wrapping container and absolutely positioned divs, when a simpler approach would be to next div2 inside of div1. then you wouldn't need to absolutely position div1, since it's already in the normal page flow, and you'll be able to use top and bottom to get div2 where you need it.

I'm going to stop here with comments on specific challenges and give some general feedback:

• It's extremely awesome that you are so comfortable diving in and getting things to work. Having said that, there are always many ways to implement a layout and some are cleaner and some are a bit more hacky. I'd say that many of these solutions are leaning towards hacky. They totally get the job done, but if we imagine working with these implementations within a larger project, we'd start having trouble working with and maintaining them pretty darn quickly.
• My across the board comment is to try to think through how to use techniques that are not position: absolute. You've used it almost exclusively, and often you are using it in a way that suggests there is a little confusion about how it works.
• Focus on solutions that hold up if the screen size changes. They don't have to be truly responsive, but aiming for liquid layouts is a good idea.

Take the time to revisit your solutions and consider what a maintainable, liquid solution might look like for each and refactor for the Monday deadline.