Eddy Eddy - 2 months ago 11
CSS Question

Calculating window width minus an exact amount of pixels

How would I code this correctly, the (window.innerWidth minus 80px) part:

<div id="myDiv"></div>

<style>
#myDiv{
float-right;
right: (window.innerWidth minus 80px);
width: 40vw;
height 200px;
background-color: #333333;
}
</style>


I have a reason for doing it exactly this way. JSFIDDLE HERE

Answer

I would write

right: calc(100vw - 80px);

plus you have to add position: relative; for the right parameter to have any effect at all: https://jsfiddle.net/78hd0hf1/1/

That also works if #myDiv is nested in one or several wrappers which are narrower than the window width (which can be a problem when using 100% instead of 100vw).