The other day I've been to a job interview where I had to create the following window- which first appeared easy,and even banal,,,but then turned out to be more complicated (lost the job!!)..
So it's like this:
There are 5 divs,each a different color. Need to place it in a way that the first appears at the top center; second at the middle of the left edge; third right at the center of page; fourth at middle of right edge; fifth at the bottom center.
So far very easy,and many ways to do it, BUT THE CATCH is that it should appear the same way minimizing the window to all sizes......I tried everything (a containing div set to relative,then the rest are absolute...fixed..using 50%,,using em,,but nothing has worked!)
Please,illuminate me on this one..
PS ( it also should be conformant with all the main browsers).
Ok,so I finally got it after some more tries,and it goes like this- everything should be set to percentage. The first step is to set the containing div to 100%,which is quite tricky. In order to be able to apply the height:100% it is necessary first to define both "html" and "body" as having height:100%.