CODEWITHSUNDEEP
css
Roland Seuhs
Roland Seuhs

Reputation: 1995

CSS: set width div to match screen edge

I have a position:absolute div element, whose position is known only at runtime, and I want it keep its left position but extend towards the screen-edge. In other words, I want to set the width of the div to the screen width minus the value of "left":

.mydiv {
   position: absolute;
   width: calc(100% - left);
}

The above try to access the value of "left" has proven unsuccessful.

When I just set "right" to zero, like this, a narrow div is moved to the right screen edge, but does not keep the left position it otherwise would:

.mydiv {
   position: absolute;
   right: 0;
}

I would like to keep the "left" position as it is and extend the div to the right screen edge.

Is there a way to do it?

Upvotes: 2

Views: 1929

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

Don't set it's width!

If the div's parent is say body... just add:

right: 0;

Example:

/*QuickReset*/*{margin:0;box-sizing:border-box;}


.mydiv {
  position: absolute;
  right: 0; /* tyadaa! */
  height: 20px;
}

#one {
  left: 78px; /* or unknown */
  background: red;
  top: 50px;
}

#two {
  left: 26%; /* or unknown */
  background: blue;
  top: 90px;
}
<div id="one" class="mydiv"></div>
<div id="two" class="mydiv"></div>

Upvotes: 3

Related Questions