Is there a way to adjust the position of an element when it comes into contact with another?
Check out this example http://jsfiddle.net/mZYR8/1/
In the example, if .title-wrap (yellow) touches .right-wrap (orange), I want the orange element to slide underneath the yellow element.
<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>
Update to clarify the question regarding "yellow underneath"
If one element makes contact with another, I want to change
position:absolute;
right:0px;
to position:relative; resulting in the following:
I am open to making any necessary changes and can also incorporate JavaScript. However, if possible, I prefer achieving this effect using CSS only.
Thank you for your assistance!