A `position:fixed` sidebar whose width is set in percentage?

Question

I\'ve successfully used the beautiful Susy grid system to create a responsive layout similiar to the one of WebDesignerWall.com:

What i failed to implement is a

Answer 1

Maybe it's possible to fix the position of an element with JS?

Yes, but it will be tedious and isn't the ideal solution .

Instead, calculate the appropriate width using JavaScript and assign it, instead of using the percentage directly in CSS. Here's a basic outline:

function updateSize() {
    var outer = document.getElementById("outercontainer"); //get the container that contains your sidebar
    var navcol = document.getElementById("navcol"); //get the sidebar (which is supposed to have position: fixed;)
    navcol.style.width = Math.floor(outer.offsetWidth * 45/100) + "px"; //or whatever your percentage is
}
updateSize();
window.onresize = updateSize; /*make sure to update width when the window is resized*/

Note: the IDs used above are just placeholders -- you will need to modify them to fit your actual page.