Div Width 100% Minus Fixed Amount of Pixels

Div width 100% minus fixed amount of pixels

You can use nested elements and padding to get a left and right edge on the toolbar. The default width of a div element is auto, which means that it uses the available width. You can then add padding to the element and it still keeps within the available width.

Here is an example that you can use for putting images as left and right rounded corners, and a center image that repeats between them.

The HTML:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

The CSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}

Setting div width to 100% minus certain amount of px

Simple solution:

<div id="content">
    <div class="padder">

    </div><!-- .padder -->
</div>
<div id="sidebar">
    <div class="padder">

    </div><!-- .padder -->
</div>

CSS:

div#content {
    float: right;
    width: 100%;
}

div#content .padder {
    margin-left: 330px;
    padding: 0 30px 0 0;
}

div#sidebar {
    float: left;
    width: 300px;
    margin-top: -30px;
    padding-left: 30px;
    margin-right: -330px;
}

This will allow you to have a fixed sidebar width and a full width content area. I have used it many times and it works like a charm.

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

How to make an element width: 100% minus padding?

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.

Html div of 100% width seems like it is 100%, but is actually missing some pixels

You have a 16px difference between your header width and window windth that's because that 16px is for the scrollbar. If you hide the scrollbar by editing your body tag's css with overflow:hidden; then you will see both header and body has the same width

Jquery width 100% minus pixels

First apply the 100% width and then do the calculation based on the applied width.

Your problem is that in your line elem.width(maxWidth) - subtractWidth; elem is setting the maxWidth which is 100% but not subtracting it after.

calculate = function(){  var total = '50%';  var subtractWidth = $('#div1').width();
  $('#div2').width(total)  $('#div2').width($('#div2').width() - subtractWidth);}

div{  background-color: red;  height: 20px;   display: block;   width: 0px;  }
#div1{  width: 70px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="div1"></div><hr><div id="div2"></div><hr><button onclick="calculate()">calculate</button>