How to Make a Div 50Px Less Than 100% in CSS3

Is it possible to make a div 50px less than 100% in CSS3?

Yes you can. Without using the IE's expression(), you can do that in CSS3 by using calc().

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

Demo: http://jsfiddle.net/thirtydot/Nw3yd/66/

This will make your life so much easier. It is currently supported in the 3 main browsers: Firefox, Google Chrome (WebKit), and IE9: http://caniuse.com/calc

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

How do I use calc(100%-50px) to minus the pixels from the top?

You can place it on top by

.treemap-chart-container { display: flex; flex-direction: column-reverse; }

Then you may place it on bottom again

.treemap-chart-container { display: flex; flex-direction: column; }

CSS How to set div height 100% minus nPx

Here is a working css, tested under Firefox / IE7 / Safari / Chrome / Opera.

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

"overflow-y" is not w3c-approved, but every major browser supports it. Your two divs #left and #right will display a vertical scrollbar if their content is too high.

For this to work under IE7, you have to trigger the standards-compliant mode by adding a DOCTYPE :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"            "http://www.w3.org/TR/html4/strict.dtd"><html><head><title></title><style type="text/css"> *{margin:0px;padding:0px;overflow:hidden} div{position:absolute} div#header{top:0px;left:0px;right:0px;height:60px} div#wrapper{top:60px;left:0px;right:0px;bottom:0px;} div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto} div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}</style></head><body><div id="header"></div><div id="wrapper">  <div id="left"><div style="height:1000px">high content</div></div>  <div id="right"></div></div></body>

Best way to limit height:100% ... - 50px?

In theory, mandel99's answer is the best, calc function is exactly the solution. But if you need to support browsers that don't support it, you can try following workarounds:

1) pure CSS2.1 way — absolute positioning:

.container {
   height: 100%; /* all parents also need to have 100% height, including html */
   position: relative;
}

.child {
   position: absolute;
   top: 0;
   bottom: 50%;
   width: 100%;
}

2) box-sizing: border-box and transparent border:

.element {
   -moz-box-sizing: border-box; /* can be removed when Firefox 28- becomes outdated */
   box-sizing: border-box;
   height: 100%;
   border-bottom: 50px solid transparent;
}

As all 'hacks', both have their limitations, but there are situations when they help.

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

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

How can an element have a width of 100%-50px using only CSS?

It's possible to hack this by adding an inner/outer div with % width and setting a negative margin px on the inside one. Otherwise there is no way to do this reliably/cross browser with CSS at this moment in time.

See here for examples.

How can I do width = 100% - 100px in CSS?

Modern browsers now support the:

width: calc(100% - 100px);

To see the list of supported browser versions checkout: Can I use calc() as CSS unit value?

There is a jQuery fallback: css width: calc(100% -100px); alternative using jquery

How to use CSS property position:fixed with top:50px and height:100%?

If i understand your question, you can just use calc on you height, so you change the height to:

height: calc(100% - 50px);

Make a div 100% + 50px wide, or crop an image but make the remainder full width

You may also use clip-path function to crop the image and it will also retain the width of the container.

Here is the snippet for image cropping, you can wrap it in container as per your needs.

:root {
    --cropSize: 50px;
}

.container {
    border: 1px solid red;
    max-width: 500px;
}

.inner-container {
    width: calc(100% + var(--cropSize));
}

img {
    width: 100%;
    clip-path: polygon(
        0 0,
        calc(100% - var(--cropSize)) 0,
        calc(100% - var(--cropSize)) 100%,
        0% 100%
    );
}

<div class="container">
    <div class="inner-container">
        <img src="https://i.stack.imgur.com/61aIt.jpg" />
    </div>
</div>