- complete Challenges 1-15
- refactor to make solutions more responsive
- refactor to make less use of
position: absolute;
First step was to display divs as inline-block in order to the divs lined up on one row. Then we tried to float div2 and div3 to the right, but that resulted in the wrong order of elements (div3 on left and div2 on right) since the first element gets floated all the way to the right and subsequent elements next (on the left of the first element). To fix this, we grouped div2 and div3 into a container div and floated the entire container to the right, resulting in correct positioning.
First step: adjust horizontal margin to auto for div2 in order to center it in the middle of the page. To get div3 to the right, just use float: right;.
First step: get both divs centered using margin: 0 auto;, trick to get div2 inside div1 was to nest div2 inside div1 and set div2 to position: relative. But then we figured out that we didn't need positon: relative; to get div2 inside div1 if the divs were nested. To get the margins to work, one could set div1's margin-top or wrap both divs in a container and adjust that margin-top. Either way would work but we found that the margins must be calculated manually (50px-20px=30px) in order to get div2 centered inside div1.
First step: use position: absolute; on both divs to stack on top of eachother (since divs are block elements, they vertically stack). Then use top and left offsets on div2 to position it down and to the right.
First step: after trying to use position: relative; and postion: absolute;, which brought up div2 to the top, adjusting the margins for div1 and div1 allowed us to position the div1 correctly to the right side of the page while keeping div2 on the next line.
Fist, wrapped all the divs in a section to allow group postioning to the bottom of the page using position: absolute and zero offsets. Then nested div2 and div3 inside div1 in order to get keep them inside div1. Adjusted the sizes of all three divs and used position: absolute; and 0 offsets to position div2 and div3 to the left/right and top/bottom inside div1.
Nested div2 inside div1 to allow (we think) for postioning of div2 inside of div1. Found that we needed to set div1 to either position: relative or position: absolute in order to get div2 (with position: absolute;) to stay inside div1. Still not exactly sure why we needed to indicate div1 not position: normal in order to make position absolute stick to the inside of the containing elemenent (div1). If using position: absolute; with div2, even when div2 is nested inside div1, using position aboslute with div2 and zero offsets to position in the lower-right corner prevented div2 from staying inside div1 (it went to the lower-right corner of the entire page).
Same issues as Challenge 7, just changed div2's bottom offset to top: 0;
Similar solution to Challenge 7: nested div2 and div3 inside div1. Then used position: absolute on all three divs to bring elements out of normal flow but keep them inside div1. Used zero offsets to position div2 and div3 within div1. Still unsure why div1 needs to position: absolute in addition to div2 and div3 in order to keep div2/div3 inside div1.
Similar solution to Challenge 9: nested div2 and div3 inside div1. Used inline-block to display div2 and div3 on same line and nest div2 and div3 inside a container. Used margin to position div2 and div3 inside div1 as a group. Then used position: absolute on div3 to move it out of normal flow but keep it inside div1. Used zero offsets to position div3 within div1 and kept div2 in normal flow while using margins to offset it from the left side. Seems to be a hack solution since used both position: absolute and margin to position div3 and div2 respectively, but now understand that elements positioned using position: absolute; will look for a parent element that is not position: normal; (e.g. Either position: absolute; or position: relative;), in order to make sure the offsets are effectively "relative" to the parent enclosing element and not the entire page.
First idea: nest each subsequent div within the previous one in order to position each within one another. Set div1's position to either relative or absolute without any offset (without an offset it makes no real difference (?)), since other position: absolute elements will look up the chain of the DOM to find a position: absolute/relative to position against. Then, set div2 and div3 to position: absolute and adjust both their offsets to be zero from the bottom and right in order to position them in div1's lower right-hand corner. Finally, add top and bottom margins to div3 to create a small gap as shown in Challenge 11's comp.
Similar solution to Challenge 11. Start with Challege 11's CSS, keeping the divs nested one within another. Keep div1 either position: relative or position: absolute with no offsets. Keep the zero bottom offset on div2 and div3 for now. To move div2 over to the right, introduce a negative offset to the right by half of div1's width (150px). Then, to move div3 down and to the left ('relative' to div2's current position), introduce two negative offsets: one for bottom and one for left.
After making the size of each div 200x200 and adjusting colors, start by nesting each div inside one another (in the vien of the past few challenges) starting with div2 inside div1, then div3 inside div2, and so on. The nesting is in order to then position each div "relative" to its parent by using position: absolute and the offets top: 100px and left: 100px for divs 2-5.
For easy positioning of div2 inside div1, nest div2 inside div1 and set both to position: absolute. Adjust both div's right offset to zero to move them to the right side of of the page, then to position div2 into the bottom-left corner of div1, adjust div2's left and bottom offsets to zero.
-
v1: nested div3 inside div1 in order to position div3 relative to its containing/parent element (div1). Used
position: absoluteand negative offsets to position div3 below div1. Similar method used with div4 inside div2 to position div4 below div2 in relation to div2. Pros of this method are that the divs remain in correct vertical positioning when adjusting the height of the window (since the vertical offsets of div3 and div4 are fixed pixels in relation to their parent elements. Cons: if the width of the window changes the groups of div1/div3 and div2/div4 move further away from each other than the comp indicates, since they are horizontally positioned relative to the left and right edges of the browser window. -
v2: In this version, none of the divs are nested within one another (all in top-level of the page) and positioned absolute to their containing element, the window. This method's responsiveness is worse than v1 since it adds the problem of the vertical alignment of divs changing when the window's height is adjusted.