Placing several divs same proportions for page

**amazonequeen** · 09-29-2011 04:29 PM

Hello!
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).
THANX!!!

**amazonequeen** · 09-30-2011 07:57 AM

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*/
</style>
</head>

<body>
<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>
</div>
</body>
</html>

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

Thread: Placing several divs same proportions for page

Thread Tools

Display

Placing several divs same proportions for page

Answer

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions