I wrapped div2 and div3 in a container so that I could position them to the right. There were two ways to approach this, but I wanted to familarize myself with markdown that wasn't just a float:right. Because of wanting to avoid float I used position absolute on the container to take it out of the natural flow and I used the right property to position it from the right side.
This was pretty easy because all you have to do is center div2 and position div3 to the right. With div2 all you need is a margin of auto to center it. Then with div3 I decided to float it to the right because since it was still in the natural flow I could just use float, instead of adding two lines of code position absoluting it and using right:0.
First I nested div2 inside div1 then I set the left and right margin to auto and the top margin to 18px because that looked about right in the middle. Finally I margin:auto'ed div1 to center inside the body. I also tried to vertical-align div2 but it wasn't working and adding a lot more lines of code so I reverted to just hacking margin.
First I nested div2 inside div1 then I set the left and right margin to auto and the top margin to 18px because that looked about right in the middle. Finally I margin:auto'ed div1 to center inside the body. I also tried to vertical-align div2 but it wasn't working and adding a lot more lines of code so I reverted to just hacking margin.
I made div1 and div2 uniform with the same px height and width, then I pulled div2 out of the normal flow with position:absolute so that it would be "over" or "on top of" div1. Then I said what's half down and half to the right of div1? 100px down and 100px right, so top:100px, left:100px.
Div1 was easy to position to the right, just position:absolute, then right:0 or you can do float:right based on preference, I chose position absolute because I was going to use positioning on the other two divs and wanted it somewhat uniform. Whatever. Div2 I used position relative, because in the natural flow, it would be one 'box' down from the top of the page then I used margin:auto; to center it. With Div3, I again used position: relative so that I would be one 'box' down from the top of the page, and I used top:100px to position it one box below div2.
First I nested div2 and div3 into div1 so that div1 was a container. Then I placed div1 in the bottom right hand corner with position:absolute and bottom:0, right:0 so that it was right there in the corner with no margin. That placed all my divs down there, so all I had to do was position div2 and div3 in their respective corners. With div2, since it was within the container of div1, I position absolute'd both div2 and 3, then I used bottom:0 and left:0 to put it in the bottom lefthand corner of div1. Div3 was pretty similar, since it was position absolute already, I just top:0 and right:0 to put it in the top righthand corner.
I started by nesting div2 inside div1 and making sure div1 was position:relative so that I could position:absolute div2 in the bottom right hand corner. Then I put bottom:0 and right:0 so that it would be in that corner.
I started by nesting div2 inside div1 and making sure div1 was position:relative so that I could position:absolute div2 in the top right hand corner. Then I put top:0 and right:0 so that it would be in that corner.
I started by nesting div2 and div3 inside div1 so that div1 would act like a container. I then set the width of div1 to something that I could easy divide up into quarters, so that positioning would be easier (i.e. 400px, so when I position left it I could say what's 1/4 of 400, oh 50, so left: 50px; would horizontally center my div2 and div3). Then I bottom:0; div3 to attach it to the bottom.
First I nested div2 and 3 inside div1 so that it
I nested div2 and 3 inside div1 so that I could position them absolutely without too much trouble. I also set the width of div1 as a percentage so that it would be responsive.