CODEWITHSUNDEEP
cssresponsive-design
Gil Goldshlager
Gil Goldshlager

Reputation: 771

CSS responsive absolute position between elements

I will like to get help please with building a responsive design.
The thing is that I don't know how to position elements as absolute but keep the same distance from top proportions between them.

Here's a link to an example where you can resize the window width and see that the two elements are moving away from each other instead of always keep the same space between them from top. So what I'm looking for is to kind of faking scaling of the whole thing so it will only get smaller/larger but look always the same.

How can I make the elements to go up and shrink the space from top when window resize please?

http://jsfiddle.net/QV6DR/

.container {
    width: 100%;
    height: 1000px;
    position: relative;
    background: #eee;
}

.container div {
    height: 0;
    position: absolute;
    background: #ccc;
}

.elm1 {
    width: 20%;
    padding-bottom: 20%;
    top: 20%;
    left: 5%;
}

.elm2 {
    width: 30%;
    padding-bottom: 30%;
    top: 40%;
    right: 10%;
}

enter image description here

Upvotes: 14

Views: 109427

Answers (1)

Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

Because your container has a height of 1000px and your elements are positioned 20% relative to the top of the container(which is always 200px), they wouldn't be able to shift up when the browser window is resized.

If you change the container styles to the following:

.container {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #eee;
}

The elements will shift up when your browser window is resized vertically.

I believe the only way to shift them up vertically without resizing the window vertically, would be by using media queries and modifying the top: 40%; styles on your elements.

Here's the fiddle without media queries.

Upvotes: 7

Related Questions