Multiple Divs that Stretch to size of window

Question

I was able to make one div go to the stretch of the window size AKA fill the screen. Now I'm wondering how the rest don't overlap each other so I can scroll through each of them in order, retaining the centered text in each div as well? Right now, it's only displaying thing 3.

http://jsfiddle.net/592NY/1/

What I am trying to achieve: demo

Here is the annotated CSS:

/* Each of the divs and their independent backgrounds */
  #thing1 { 
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:1000;           
            background: blue;
}
#thing2 {   
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:1000;           
            background: red;
}
#thing3 {   
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:1000;           
            background: green;
}
/* Centering the text */
#text {
    width: 100px;
    height: 100px;
    margin: auto;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

Kaloyan · Accepted Answer · 2013-06-24T21:09:35.030

2

You either have some logic I don't understand or you wish to go full 3D :D The three divs have same z-index, none of them has it's opacity modified soo they'll simply appear in the order they appear in the HTML (if you move thing 3 before thing 2, thing 2 will be visible). Thing 2 is currently "on top" of thing 1 and thing 3 is on top of thing 2.
As I said 3D , you can use firefox's 3D view to see what's happening.

Update: you can use top: 100% for the second div and top: 200% for the third, which surprisingly seems to work even on IE.

http://jsfiddle.net/592NY/4/

edited Jun 24 '13 at 21:09

answered Jun 24 '13 at 20:57

Kaloyan

7,262
4
32
47

How can I make them not overlap then? :D – lawx Jun 24 '13 at 21:01
How exactly do you want the whole thing to look like ? – Kaloyan Jun 24 '13 at 21:01
Check my question, I added an image. – lawx Jun 24 '13 at 21:05

Andy G · Answer 2 · 2013-06-24T21:49:35.940

You are using absolute positioning and all three have the same z-index, so the last one will appear on top of the other two. If you reduce the z-index of the third item, then the second div will now be on top.

Ids must be unique on the page, so "text" should be a class.

http://jsfiddle.net/andrewgsw/592NY/5/

body, html {
    height: 100%;
}
#thing1 {   
            position: relative; 
            height: 100%;           
            background: blue;
}
#thing2 {   
            position: relative; 
            height: 100%;   
            background: red;
}
#thing3 {
            position: relative; 
            height: 100%;       
            background: green;
}
.text {
    width: 100px;
    height: 100px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

It is not necessary to specify width: 100% for DIVs, this is their default behaviour.

It is much neater to give these similar boxes a class, then colour them using their ids:

http://jsfiddle.net/andrewgsw/sMSPa/2/

body, html {
    height: 100%;
    margin: 0; padding: 0;
}
.things {
    position: relative;
    height: 100%;
}
#thing1 {               
    background: blue;
}
#thing2 {
    background: red;
}
#thing3 {   
    background: green;
}
.text {
    width: 100px;
    height: 100px;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

I do not know what you are trying to achieve. As your code stands, there will only ever be one visible, on top of the other two. — Andy G, Jun 24 '13 at 20:59
I am trying to achieve `how the rest don't overlap each other so I can scroll through each of them in order` . Can you explain in a fiddle? — lawx, Jun 24 '13 at 21:00

Derek Story · Answer 3 · 2013-06-24T21:06:28.263

1

http://jsfiddle.net/derekstory/592NY/2/

Remove the absolute and z index since overlapping is not desired.

html, body {
    height: 100%;
}
#thing1 {
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: blue;
}
#thing2 {
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: red;
}
#thing3 {
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: green;
}
#text {
    width: 100px;
    height: 100px;
    margin: auto;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

edited Jun 24 '13 at 21:06

answered Jun 24 '13 at 21:01

Derek Story

9,518
1
24
34

Now, each div seems to be a little taller than the window? – lawx Jun 24 '13 at 21:02
http://jsfiddle.net/derekstory/592NY/3/ Sorry see now..I think this is what you are looking for. – Derek Story Jun 24 '13 at 21:02

Multiple Divs that Stretch to size of window

3 Answers3

Linked