Как я могу отцентрировать оболочку <div>, чтобы она не располагалась под фиксированной вертикальной панелью навигации?

Question

В настоящее время у меня есть это для моей панели навигации:

#nav-bar {
    position:fixed;
    float:left;
    width:300px;
    height:100%;
    background-color:#000000;
}

Я хочу, чтобы все элементы, расположенные справа от него, не попадали под панель навигации, и я хочу иметь возможность центрировать обертку <div> так, чтобы он был центрирован в соответствии с остальной частью страницы, которая не занята панелью навигации.

Я пытался реализовать обертку <div> это было расположено под вертикальной панелью навигации, но у меня не получилось.

В настоящее время это то, что у меня есть: http://codepen.io/anon/pen/AXkKKo

Answer 1

Я не очень понимаю, что вы хотите, но попробуйте это,

HTML:

<div id="nav-bar"></div>
 <div class="wrapper">
 <div class="content center">
   Test Content
 </div>
</div>

CSS:

#nav-bar {
position:fixed;
float:left;
width:300px;
height:100%;
background-color:#000000;
}
.wrapper{
  background-color:#ff0000;
  margin-left:300px;
  height:100%;
  display:block;
}
.center{
  background-color:#0000ff;
  width:300px;
  margin:auto;
}

Codepen: http://codepen.io/anon/pen/RRmWPA