Как добавить столбец на веб-страницу

Question

Я пытаюсь ввести html и css в youtube , чтобы создать столбец с правой стороны, который выталкивает все с сайта влево.По сути, я хочу сделать что-то похожее на то, что делает Inspect Tool в Chrome.

Это расширение для Chrome, поэтому код, который у меня сейчас есть, выглядит следующим образом:

background.js:

...
chrome.tabs.executeScript(null, {file: 'column.js'});
chrome.tabs.insertCSS(null, {file: 'column.css'});  
...

column.js:

var div = document.createElement("div");
div.id = 'column';
document.body.appendChild(div);

column.css:

#column {
  background-color: black;
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: auto; 
}

Но это просто создает столбец поверх веб-страницы вместо того, чтобы толкать все.

Answer 1

Как насчет уменьшения body width как width #column.

#column {
    background-color: black;
    position: fixed;
    right: 0;
    width: 20%;
    top: 0;
    bottom: 0;
    z-index: 1;
}

body {
   width: 80%;
}