How to make a div with several absolute positioned elements responsive

Question

i have a div container with a fixed width and some elements inside it, which are placed using position: absolute. I've four layers to create an effect with beveled images and an "opening" effect.

Now this is working, as you can see in my jsfiddle below. ( jsfiddle - working Example ) The question is, how could i make this responsive. I mean not for mobile, but for an 100% width layout, where the window can be resized and the following requirements are meet:

the "test" text and the open button are always centered in the three-cornered area in the center
the images left and right can be cutted from the left (for the left picture) and the right (for the right picture)

I tried to work with background-size: cover, but it is not working as expected when I'm resizing the browser window.

Here is my Code (HTML):

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Test</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="test.css">
        <script src="jquery-1.11.1.js"></script>
    </head>
    <body>
        <div id="slider">
            <div class="img left"></div>
            <div class="img right"></div>
            <div class="text">
                <h1>Test</h1>
                <a href="#">open</a>
            </div>
            <div class="textLeft">
                Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna. Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna.
            </div>
            <div class="textRight">
                Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna. Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna.
            </div>
        </div>
        <script>
            $( "a" ).click(function() {
                $( ".left" ).animate({ 
                        right: "850px",
                      }, 1000 );
                $( ".right" ).animate({ 
                        left: "850px",
                      }, 1000 );
            });
        </script>
    </body>
</html>

CSS:

#slider{
    background-color: black;
    position: relative;
    height: 500px;
    width: 1000px;
    overflow: hidden;
}

#slider .img.left,
#slider .img.right{
    height: 500px;
    position: absolute; 
    top: 0;
}

#slider .img.left{
    background-image: url(imgLeft.png);
    right: 410px;
    width: 590px;
    z-index: 3;
}

#slider .img.right{
    background-image: url(imgRight.png);
    left: 250px;
    width: 750px;
    z-index: 2;
}

#slider .img.left.open{
    right: 750px;
}

#slider .img.right.open{
    left: 750px;
}

#slider .text{
    color: white;
    position: absolute;
    bottom: 45px;
    height: 100px;
    width: 200px;
    left: 45%;
    z-index: 4;
}

#slider .textLeft,
#slider .textRight{
    position: absolute;
    color: white;
    height: 300px;
    width: 300px;
    z-index: 1;
}

#slider .textLeft{
    right: 100px;
    top: 100px;
}

#slider .textRight{
    left: 100px;
    top: 100px;
}

a{
    color: white;
}

Because it is easier to edit and make suggestions, I've created a JSfiddle:

jsfiddle - working Example

Answer 1

I've had a stab on js fiddle and got you a lot further on..

Its not completely finished as you need to decide what to do with the second paragraph when it wraps at medium screen widths.

It works through a combination of percentage widths and floats.

The main issue with your version were two things:

All the absolute positioning.

Using background images.

To be responsive, images ideally should be inline as the browser will resize them according to screen width so long as their width and height attributes aren't declared.

To finish this off you need to decide what to do with that second paragraph, and start looking at media queries to change things around a bit when you get to small screen sizes.

I've added a sample query for screens less than 480px, and made a few css tweaks so its nearly there.. (but the text is teeny!)

Hope it helps,

Good luck with it, enjoy!:

x

http://jsfiddle.net/h0rhay/2y17p1Lu/6/

Answer 2

The easiest way is to work with different css files.

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-width: 300px)" />

Then you can easy set the width of your screen: enter link description here

Here is a good link for Screen Resolution.

How to make a div with several absolute positioned elements responsive

Question

2 answers

solution1
0 2014-09-11 13:06:57

solution2
-1 2014-09-11 09:43:22

How to make a div with several absolute positioned elements responsive

Question

2 answers

solution1 0 2014-09-11 13:06:57

solution2 -1 2014-09-11 09:43:22

solution1
0 2014-09-11 13:06:57

solution2
-1 2014-09-11 09:43:22