Make position:fixed div dynamic width in pixels on CSS

Question

I created a simple markup with position:fixed <div> header that has two hyperlinks. Next I want that div to dynamically match the width of the content of the page.

The problem here is that the dimensions of the page's content are controlled by padding of the body element that is set in pixels.

Here is the fiddle that describes the situation: http://jsfiddle.net/jn7z1wke/2/

Googling says that the width of the fixed element could be controlled dynamically in percents (like it is shown in the fiddle width: 95%; but that doesn't solve my problem - I need the width of the fixed div to be dynamically adjusted in pixels.

I perfectly know how to do that on JS/JQuery but ultimately I want to do that on plain CSS.

Answer 1

You could use calc() to subtract the 40px of padding.

Updated Example

.fixedheader {
    position: fixed;
    background: none repeat scroll red;
    width: calc(100% - 40px);
}

Browser support for calc() can be seen here.

---

Alternatively, just set right:20px/left:20px:

Example Here

.fixedheader {
    position: fixed;
    background: none repeat scroll red;
    right:20px;
    left:20px;
}