CSS - prevent absolute positioned element from overflowing body
You have to work with nested divs which have all some different responsibility:
The outermost sets the position with left and right simultaniously. The right:0 sets it to the right.
The inner div is the real content div, which sets the width.
Here is a demo: http://jsfiddle.net/atnc3/44/
<div class="abs-position">
<div class="abs-content">
Absolut Vodka
</div>
</div>
.abs-position {
position:absolute;
right:0;
left: 300px;
overflow: hidden;
}
.abs-content {
width: 400px;
}
.abs-position {
position:absolute;
right:0;
left: 300px;
overflow: hidden;
/* following: just for demonstration purposes */
padding: 5px;
border: 1px solid gold;
opacity: 0.8;
}
.abs-content {
width: 400px;
/* following: just for demonstration purposes */
padding: 5px;
background: lightgray;
}
.container {
width: 600px;
background: cornflowerblue;
}<div class="abs-position">
<div class="abs-content">
Absolut Vodka
</div>
</div>
<div class="container">
Other content<br>
Other content<br>
Other content<br>
Other content<br>
</div>