- Created HTML for the 3 div elements and placed unique content (i.e. "div1", "div2") to know which div element was which.
- Wrote CSS for all 3 DIV elements so that they all looked exactly the same and used the inline-block display to place them all side by side.
- Changed font to match the sans-serif look.
- height and width to make a square box.
- background color of black.
- Font color of white.
- Nested the 2nd and 3rd div elements inside of article tags so that I can move those two separately from the div 1 element.
- Added CSS to the article element to display it inline with the first div element.
- Added CSS to position it absolute, and then set right to a position of 0 so that it moved to the right side of the screen since no other elements have a relative position identified.
- I copied the html and CSS from above to start with the same sized div elements but removed the following:
- HTML: Removed article tags because I plan to treat each div individually, vs grouping two into a group
- CSS: Removed inline-block display because I wanted them to be their natural block element and stack on top of one another.
- Put a unique class on the second and third div so that I could adjust their layout individually.
- Added two CSS stylings to the second div element:
- First, set "margin: 0" so that it would reside in the center of the block (i.e. center of the screen)
- Second, set "position: relative" so that the third div could have an absolute position based off of this second div
- Added two CSS stylings to the third div element:
- First I put "position: absolute" so that it could reside where instructed based on the second div (and not the entire body of the page)
- Second I set "right: 0" so that it resides far right of the screen
- Created a large div (300px x 300px) and nested a div half the size within it (150px x 150px)
- Colored the larger box gray, the smaller black so I could see the smaller box sitting on top of the larger box
- Set the larger box to a postion of "relative" so that the smaller box could be positioned as "absolute" and move based off of the larger box
- Set the height and width for the smaller box to 50% of the larger box (instead of the original 150px) so that it could scale with the larger box should the size increase
- Set the postion of "top" and "left" to be 25% so that the smaller box would reside exactly in the center of the larger box and again scale accordingly with the larger box should the size increase or decrease
- Set two divs, one nested inside the other so that the inner div can move in relation to its parent
- set unique class for each div so that I can add specific characteristics to each div
- Set a black background color for div1 and set its position to relative so that div2 can be moved relative to the position of div1 (its parent) vs. relative to the entire page
- Set a lighter background color for div two and set the position to absolute so I could move it freely, yet in relation to div1
- Set "top" and "left" CSS properties to 50% so it would sit down halfway on div1 and halfway to the right of div1.
- Set three equal sized div elements and gave each a unique class div1, div2 and div3
- nested all 3 div tags within a section element with a class of "container"
- defined the container with a height and width of 100%
- All three elements were given a position of "absolute" so they could be positioned freely within the container:
- div 1 was top: 0; and right: 0;
- div 2 was margin: auto; left: 0; right: 0; top: 0; bottom: 0;
- div 3 was left: 0; and bottom: 0;
- Set 3 divs:
- div 1 is 225 x 525
- div 2 and 3 and 150 x 150
- div 2 and 3 are nested inside of div 1 so they can all be positioned and div 2 and 3 can be aligned according to div 1 position (their parent and the next "absolute" element up the chain)
- div 1 is set to right: 0 and bottom: 0 to place it in the lower right corner
- div 2 is placed right: 0 and top: 0 to sit in the upper right corner
- div 3 is set left: 0 and bottom: 0 to sit in the opposite corner from div 2
- div 1 is 300 x 300, div 2 is half the size and nested inside of div 1
- div 1 is given a position of "relative" since it's normal position would be in the upper left corner
- div 2 position: absolute so it can be positioned freely within div 1
- div 2 is given a position of right: 0 and bottom: 0 to sit in the lower right corner
- div 1 is 300 x 300, div 2 is half the size and nested inside of div 1
- div 1 is given a position of "relative" since it's normal position would be in the upper left corner
- div 2 position: absolute so it can be positioned freely within div 1
- div 2 is given a position of right: 0 and top: 0 to sit in the upper right corner
- nested div 2 and 3 within div 1
- set div 1 to a position of "relative" so that div 2 and 3 could be positioned "absolute" inside of div 1
- set div 2 to top: 0, left: 0, and right: 0 to try and finally margin: auto to set it in the center of div 1 at the top
- set div 3 to bottom: 0, left: 0, and right: 0 and margin: auto to center in div 1 at the bottom
- set div 2 and 3 within div 1 so that they could be positioned based on div 1's position
- div 1 was given a position of "relative" so that div 2 and 3 could be absolute within it.
- div 1 has margin: 40px for top and bottom and auto for the sides to center it
- div 2 and 3 both have an absolute position
- div 2 is left: 5% to space it from the left edge, top and bottom = 0 and margin auto so it centers vertically
- div 2 is left: 5% to space it from the left edge, top and bottom = 0 and margin auto so it centers vertically
- set div 1 to be twice as tall as it is long and positioned it as relative so that the two divs nested within it can be positioned freely
- nested div 2 inside of div 1 and gave it an absolute position so it could be position based off of div 1's position
- gave div 2 a position of bottom: 0 and right: 0 to place it in the lower right corner
- nested div 3 inside of div 2 and gave it an absolute position so it could be position based off of div 2's position
- gave div 3 a position of bottom: 5% and right 5%
- div 2 was sized 50% as tall as div 1 and 85% as wide so it could scale based on the size of its parent (div 1)
- div 3 was sized as a percentage of div 2 for the same reason (though making a perfect square was more difficult this way)
- I set div 1 size in pixels and position of relative so that div 2 and 3 could be positioned relative to div 1 and div 2 respectively
- div 2 was nested within div 1
- div 3 was nested within div 2
- Div 2 was set to be 50% of the height of div 1 and 75% of the width (esimated based on comp)
- Div 2 was set to position absolute, and bottom 0 so it could reside even with the bottom line of div 1
- Div 2 was set to left: 62.5% so that div 2 could sit exactly half within div 1 and half outside to the right
- Div 3 was set to position absolute so it could be placed relative to div 2 (its parent)
- Div 3 was positioned bottom: -25% so it sits half inside div 2 and half outside
- Lastly div 3 was set as 75% of the width of div 2 and positioned right 62.5% so it could be half inside div 2 and half outside to the left
- Created 5 div tags, each nested within the div before it (i.e. they are all nested within div 1)
- All divs were set to the same height/width and given a position: absolute
- div 1, 3, 5 were colored black and div 2, 4 colored gray
- div 2, 3, 4, 5 were given position top: 50% and left: 50% so they positioned equally from one another
- div 1 did not have this positioning as it would set the entire set of div's 50% off from the entire page (since they are all nested and positioned from div 1
- created 2 divs, div 1 being twice the size of div 2
- Div 2 was nested inside div 1
- Both divs were given a position: absolute
- Div 1 was positioned top: 0 and right: 0 to put it in the top right corner
- Div 1 was positioned: left: 0, bottom: 0 to put it in the lower left corner
- I created 4 div elements
- div 1 and 4 were styled the same
- div 2 and 3 were styled the same
- I nested all 4 divs inside of a div with class="container" and set height and width to 80% to scale down the overall size of the conatiner but keep it a size equally relative to the main screen width and height
- every element was given a position of absolute so they could all be positioned freely within the container div
- because the comp showed the larger elements going over half the height of the container and less than half the width I set div 1 and 4 to height: 55%; so they cross the mid-way point vertically and width: 48% so they did not overlap across the middle horizontally
- div 2 and 3 appeared to be half the dimensions of the larger divs so they were given a height of 27.5% and width of 24%
- each div was positioned in a separate corner of the container
- div 1 was top: 0 and left: 0 to be positioned in the upper left corner
- div 2 was given top: 0 and right: 0 to be positioned in the upper right corner
- div 3 was given bottom: 0 and left: 0 to be positioned in the lower left corner
- div 4 was given bottom: 0 and right: 0 to be positioned in the lower right corner