CODEWITHSUNDEEP
htmlcss
Abdullah Salma
Abdullah Salma

Reputation: 570

CSS positioning absolute With point of reference

I have two divs inside each other one relative the other is absolute and positioned right: -35 so it over pass the relative div with -35

now it was calculated as -35 with - Name if the length of the text (inside #sub) is increased it will move over the text (hello everyone.) and why? because it is position right.

it will look like this

hello everyone. -Name

html:

<div id="main">
    <span>hello everyone.
    <span id="sub">-Name</span>
</div>

code:

#main {position: relative; display: inline-block;}
#sub {
    position: absolute;
    bottom:0;
    right: -35;
}

There is another solution which changing right to left. But it will involved javascript so I can get the length of the div main since it will not always be hello everyone. than I add lenth.div + 35 to solve this.

Is here a way to maintain right: -35, and change the expanding of the span to right.

Upvotes: 0

Views: 214

Answers (1)

Jhecht
Jhecht

Reputation: 4435

You should just be able to use left:100% on your absolute positioned span element. I think this is the result you wanted. Also, I fixed your HTML by adding the closing tag for the first <span> element.

#main {
  position: relative;
  display: inline-block;
}
#sub {
  position: absolute;
  bottom: 0;
  min-width: fit-content;
  left: 100%;
  background-color: orange;
}
<div id="main">
  <span>hello everyone.</span>
  <span id="sub">-Name</span>
</div>

Upvotes: 2

Related Questions