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%.

in some browsers, this will work: http://caniuse.com/#feat=calc — Cristi Pufu, Jun 19 '12 at 15:00
possible duplicate of [Is it possible to make a div 50px less than 100% in CSS?](http://stackoverflow.com/questions/11093943/is-it-possible-to-make-a-div-50px-less-than-100-in-css) — James Allardice, Jun 19 '12 at 15:01

Christoph · Accepted Answer · 2019-10-18T11:56:53.850

8

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));

edited Oct 18 '19 at 11:56

answered Jun 19 '12 at 15:00

Christoph

50,121
21
99
128

thanks, if id did this using the margin left method would i need to have the side nav sitting above the image using z-index ? – sam Jun 19 '12 at 15:09
@sam take a look at phrogz demo, you don't need any zindex. – Christoph Jun 19 '12 at 15:10
can you do something like calc(100% - margin-left)? asuming margin-left is dynamic... – Berker Yüceer Aug 22 '19 at 11:49
1

@BerkerYüceer You can totally do this!! Either use a preprocessor (LESS/SASS) or native css variables - I edited my answer accordingly. – Christoph Oct 18 '19 at 10:34

Marcio Mazzucato · Answer 2 · 2012-06-19T22:44:21.727

3

You can use calc() to get what you want using only CSS3.

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

You can see an example here

Works fine in IE9, Firefox and Google Chrome.

Additional reference: https://developer.mozilla.org/en/CSS/-moz-calc

edited Jun 19 '12 at 22:44

answered Jun 19 '12 at 15:03

Marcio Mazzucato

8,841
9
64
79

Phrogz · Answer 3 · 2012-06-19T15:54:55.407

Demo: http://jsfiddle.net/MY6Z9/

#content { margin-left:150px }

Assuming that your #content item is a display:block element that, by default, will fill the available width.

If you want a single image to fill the width, instead of tiling, you can use a background image along with background-size on modern browsers:

#content {
  background:url(myimage.jpg) no-repeat;
  background-size:100% auto; 
}

Demo: http://jsfiddle.net/MY6Z9/5/

score 0 · Answer 4 · answered Jun 19 '12 at 15:00

0

For a non-position:static element you could try setting right: 150px;

answered Jun 19 '12 at 15:00

Alexander Pavlov

31,598
5
67
93

score 0 · Answer 5 · answered Jun 19 '12 at 15:06

You may use a wrapping div around #image-full div to achieve this:

#image-wrapper
{
    position:absolute;
    width:100%;
    padding-right:150px;
}

#image-full
{
    width:100%;
    background-image:url(...);
    /* ... */
}

#navigation
{
    position:absolute;
    width:150px;
}

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

5 Answers5

Demo: http://jsfiddle.net/MY6Z9/

Demo: http://jsfiddle.net/MY6Z9/5/