css responsivness, if one element "touches" other element change css position

Question

how can I change the position of an element when one touches the other.

here is an example http://jsfiddle.net/mZYR8/1/

so if you look at the example lets say if .title-wrap (yellow) touches .right-wrap (orange) I would like orange to "go" undenith yellow

<div class="wrap">
    <div class="title-wrap">
        <h1>Lorem Ipsum Dolor</h1>
    </div>
    <div class="right-wrap">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</div>
<style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    .title-wrap {
        background-color:yellow;
        display:inline-block;
    }
    h1 {

        font-size:20px;
        line-height:40px;
    }
    .right-wrap {
        position:absolute;
        display:inline-block;
        right:0px;
        top:0px;
        background-color:orange;
        padding:20px;
    }
    .right-wrap span {
        display:inline-block;
        width:20px;
        height:20px;
        margin-right:10px;
        background-color:purple;
    }
</style>

from here UPDATED the Question cause "yellow undenith" was not clear

so if one element touches the other I would like to change

position:absolute;
right:0px;

to position:relative; and it shoudl look like this:

how it should look with position:relative;

I can change what ever is needed and could also add javascript. but if possible with css only I would like it with css.

thanks for helping!

You need to look into media queries and breakpoints. No JS is really needed. — Paulie_D, Oct 31 '13 at 15:14
@Paulie_D I tried with media queries but I don't know the width of div.title-wrap and also I don't know the width of div.right-wrap cause this can be loaded dynamically. — caramba, Oct 31 '13 at 15:16
@Paulie_D I thought media queries only work with screen width (http://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen) show me how to use it with
width and you are my hero — caramba, Oct 31 '13 at 15:22
@Paulie_D Media queries are very good, but I think it is also worth pointing out that they don't work without extra help in IE8 and below. So you should carefully look at your target audience before using them. — Amber, Oct 31 '13 at 15:28

score 2 · Accepted Answer · answered Oct 31 '13 at 15:37

I think I've got a solution, which is to float the element to the right.

If anyone knows a better solution, please feel free to add an answer.

This seems to work for me.

http://jsfiddle.net/mZYR8/2/

   .right-wrap {
        float:right;
        display:inline-block;
        right:0px;
        top:0px;
        background-color:orange;
        padding:20px;
    }

score 1 · Answer 2 · answered Oct 31 '13 at 15:16

1

you can make an element appear above another by giving them the z-index CSS property.

.right-wrap {
    position:absolute;
    display:inline-block;
    right:0px;
    top:0px;
    background-color:orange;
    padding:20px;
    z-index:-1;
}

And:

.title-wrap {
    background-color:yellow;
    display:inline-block;
    z-index:1;
}

should work (the higher z-index goes on top)

answered Oct 31 '13 at 15:16

Amber

812
8
21

ou thank you, with on top I mean position:relative; hold on I'll add a picture to the question – caramba Oct 31 '13 at 15:18
@caramba Ah okay, I misunderstood. I'll leave this answer here for now and look into answering your actual question. – Amber Oct 31 '13 at 15:25
thanks for helping, I've got an answer, what do you think. It is what I want, any reasons to not use float right? – caramba Oct 31 '13 at 15:38
@caramba There is no reason to not use `float:right` that I know of, good on you that you found the solution that suits your needs! – Amber Oct 31 '13 at 16:44

css responsivness, if one element "touches" other element change css position

2 Answers2