css Question posted in
Some basic documentation can be found here.

Css – CCS to position an HTML element to the left edge of window without 'absolute' or JS?

On a static website (possible but not desirable to use JS), I’ve a blog with a column width of a large screen of maybe 50% for easy reading.

But then I have a large picture (actually it’s an interactive object) with lots of detail that would be great occupying (nearly) the full width of the screen.

A full-width image

width: 100vw; (or w-screen in Tailwind) is great, but the left edge of the picture is in line with the parent. Specifying relative positioning, I can force the picture to the left using Left = -X px, but the distance X varies, so won’t work without JavaScript.

Using Tailwind, or vanilla CSS, I’ve also tried transform: translateY(-25%);, but I still need to calculate the distance.

Absolute positioning is great, but the remainder of the blog doesn’t flow around the picture.

Fixed positioning doesn’t work either as the picture should scroll with the rest of the text.

So, I think I’m left with Javascript:

document.getElementById("myElementId").style.Left = 
-document.getElementById("myElementId").getBoundingClientRect().left;

Any other ideas? (I would have thought my issue wasn’t that unusual, but haven’t seen any clean solutions.)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Whoever edited my original question: I find it unhelpful - to the community - to remove my best suggestion, as it could be useful for others, and it certainly had flaws so wasn't a 'true' solution, but was a effective hack or kludge, a quick fix.

    So for other's use, another approach is to create a similar item to the 'absolutely positioned' image but put the absolute one at a higher Z-index. 2 lines & pretty clean, works regardless of your current theme, it's just inelegant:

    <img src="https://images.pexels.com/photos/851023/pexels-photo-851023.jpeg"  class="absolute left-0 right-0 z-20 mx-auto border-4" style="height:60vh; width:95vw"></img>
<div class="z-10" style="height:60vh;">I am hidden behind the absolute img, but ensure that doesn't hide any more content to follow!</div>

  2. 0

    You need to know the distance between the image’s left edge and screen’s left edge, so try putting everything that stand between them to variables and use calc to translate the image.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Put the main column's width, padding left, border left width in variables... */

.column {
  --column-width: 50vw;
  --column-padding: 20px;
  --column-border-width: 1px;
  width: var(--column-width);
  margin: auto;
  padding: var(--column-padding);
  border: var(--column-border-width) solid #ccc;
  border-radius: 5px;
  text-indent: 2rem;
}


/* ...and use them to calculate the position of the large object */

.large-obj-wrapper {
  width: 100vw;
  transform: translateX(calc(0px - (100vw - var(--column-width)) / 2 - var(--column-padding) - var(--column-border-width)));
  position: relative;
  padding: 20px;
  border: 1px dashed #c00;
}

.large-obj {
  height: 100px;
  background-color: #7df;
  display: flex;
  justify-content: center;
  align-items: center;
}
    <div class="column">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure excepturi unde cumque ad, ipsa vel dolorum autem omnis praesentium fugiat impedit modi ex nostrum atque hic odit facere eveniet quis!</p>
  <div class="large-obj-wrapper">
    <div class="large-obj">
      <p>Large image or object</p>
    </div>
  </div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure excepturi unde cumque ad, ipsa vel dolorum autem omnis praesentium fugiat impedit modi ex nostrum atque hic odit facere eveniet quis!</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search