Results 1 to 2 of 2

Thread: Placing several divs same proportions for page

  1. #1
    Join Date
    Sep 2011

    Question Placing several divs same proportions for page

    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).

  2. #2
    Join Date
    Sep 2011

    resolved Answer

    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%.

    Briefly,the code would look like this:

    <style type="text/css">
    html {
    height: 100%;
    body {
    margin: 0;
    padding: 0;
    height: 100%;
    #wrapper{height:100%;width:100%; background-color:#009933 ;border:solid 3px; position:relative }
    .inner{height:15%;width:15%; position:absolute}
    #d1{background-color:#FF0000; left:46%} /*red*/
    #d2{background-color:#FF00FF; top:46%; } /*pink*/
    #d3{background-color:#FFFF00; left:46%;top:46%;} /*yellow*/
    #d4{background-color:#0000FF; left:46%;top:84%;} /*blue*/
    #d5{background-color:#00FF00; left:84%;top:46%;} /*green*/

    <div id="wrapper">
    <div id="d1" class="inner"></div>
    <div id="d2" class="inner"></div>
    <div id="d3" class="inner"></div>
    <div id="d4" class="inner"></div>
    <div id="d5" class="inner"></div>

    Job is lost,but...Hope this had been helpful to someone..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center