CODEWITHSUNDEEP
htmlcss
lampshade
lampshade

Reputation: 2816

Move an absolute positioned element's right side to the left side of it's parent

The Problem

I have a container within another one. The rule display: inline-block; on the outer container is a given. I want that the content of the inner container ends where the content of the outer one starts. I tried using left: -100%; but naturally it moves the content only as far as the outer container is wide. The use case: The inner element will be a tooltip shown on hover aligned on the left side.

How can I got both elements aligned after each other and not overlapping without using JavaScript?

HTML

<div>
    Short content
    <div>This is very long test sentence.</div>
</div>

CSS

div {
    position: relative;
    display: inline-block;
    margin: 40px 200px;
    background: rgba(123, 234, 345, 0.7);
}

div > div {
    position: absolute;
    top: 20px;
    left: -100%;
    margin: 0;
    background: rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

Demo on jsFiddle

Demo

Upvotes: 7

Views: 17072

Answers (2)

littleswany
littleswany

Reputation: 483

If you are trying to put the objects in line just remove the left: -100%.

http://jsfiddle.net/dkv9W/3/

Upvotes: 0

skip405
skip405

Reputation: 6279

Try using right: 100%; instead of left: -100%;. Like so:

http://jsfiddle.net/dkv9W/1/

Upvotes: 16

Related Questions