2 pairs of divs at the same position w/ elastic layout

Question

I've been trying to add 2 divs centered one next to another with two aditional divs on the same position of the last ones but hidden... the big problem here is that I want the page to be elastic...

Does anyone know how can I do this?

Answer 1

It depends what exactly you need it all to do, but basically you can do it by wrapping them all in a container div that's centered and then working out the layout for the inner divs. Elastic means everything has to be in percentages.

This should get you started:

<div class="centered container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="left hidden"></div>
    <div class="right hidden"></div>
</div>

And the CSS:

.container {
    width: 25%; /* This is arbitrary, make it your desired width */
    height: 25%; /* if you don't want explicit height, you'll need a clearfix */
    position: relative;
}
.centered {
    margin-left: auto;
    margin-right: auto;
}
.left {
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
.right {
    width: 50%;
    position: absolute:
    top: 0;
    left: 50%;
}
.hidden {
    display: none; /* or opacity: 0, or however else you want to do it */
}

Answer 2

Maybe try this. I didn't test this out but it's worth a try and I think I am accomplishing what you are looking for.

<div class="wrapper">
<div>
<!-- DIV ONE -->
</div>
<div>
<!-- DIV TWO -->
</div>
<div class="hidden three">
<!-- DIV THREE -->
</div>
<div class="hidden four">
<!-- DIV FOUR -->
</div>
</div>

CSS
.wrapper{
width: 100%;
max-width:1500px;
margin: 0 auto;
position:relative;
}
div{
float:left;
width: 50%;
}
.hidden{ visibility:hidden; 
position: absolute;
top:0; 
}
.hidden.three {
left:0;
}
.hidden.four{
right: 0;
}

Answer 3

The benefit to this solution is that the divs can be any width and will still split the center of the screen.

CSS

.layer .left, .layer .right {
    position: absolute;
    width: 40%;
    height: 50%;
}

#layer2 .left, #layer2 .right {
    z-index: 2;
    border: 1px dashed black;
    display: none;
}

.left  { margin-right: 50%; right: 0; background-color: blue; }
.right { margin-left: 50%;  left: 0;  background-color: red;  }

HTML

<div id="layer1" class="layer">
    <div class="left">Layer 1 left</div>
    <div class="right">Layer 1 right</div>
</div>
<div id="layer2" class="layer">
    <div class="left">Layer 2 left</div>
    <div class="right">Layer 2 right</div>
</div>

Answer 4

I think what you're looking for is the good old

display: inline-block;