position html element left of another

Issue

I’m positioning one html element absolute at i.e left:1000px. Now I want to place another div element directly in front of it at the left side.
Using negative margin is not an option because I dont know the size of the element. Current solution is to use javascript, using hidden attribute until rendered, then get size using getBoundingClientRect() at then apply left: ob.style.left = -viewportOffset.width + "px";

Is there a css-grid trick or something I can take advantage of? Im using Blazor if that matters.

<div title=@ToolTipText class="@currentClass()" style="position:absolute;left:@left;top:@top;height:@height;width:@width;line-height:1;">
    @Value
    @if (!string.IsNullOrEmpty(Title))
        {
            <div class="@TitleFontScheme" style="position:absolute;line-height:1;background-color:transparent;" @ref="titleElement">@Title</div>
        }

</div>

Solution

This seems like a good place to use transform:translateX(-100%), since translate looks at the width of the element of itself.

.firstElement{
  position:absolute;
  left:200px;
  width:50px;
  height:50px;
  background-color:red
}

.secondElement{
  position:absolute;
  left:200px;
  width:40px;
  height:50px;
  background-color:blue;
  transform:translateX(-100%)
}

<div class="container">
  <div class="firstElement"></div>
  <div class="secondElement"></div>
</div>

Answered By – Swimmer F

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0