Css to achieve {Width:100% -150px}

Question

I've got a site with a side nav and I want the rest of the screen to be a filled with an image, the side nav is off the left and is 150px wide.

Ideally id like to set the full screen image at width:100% -150px; but I'm pretty sure this is not proper CSS.

Is there way to achieve the same effect ? I can't use width:90%; as on wider screens 150px would be more like 5% of the width rather than 10%.

Answer 1

In fact - it is! (with css3)

width: calc(100% -150px);
width: -moz-calc(100% - 150px);
width: -webkit-calc(100% - 150px);

works, but only for the most modern browsers... caniuse

If you dont want to use this, you can use margin to create an offset: margin-left:150px;. This however needs a parent-element with 100% width and your image to be a block-level element (display:block).

Another option is to use box-sizing. This lets you choose another box-model which doesn't calculate margins and paddings into the element-width. This helps in some typical "i need 100% width - Xpx border" cases too.

In response to @BerkerYüceer's comment - you can also use dynamic values within the calc like following:

/* declare css variable */
--leftmargin:150px;

/* use the variable like following */
calc(100% - var(--leftmargin));