Satyadev Satyadev - 5 months ago 8x
CSS Question

Why most of the sidebar examples have left 250 and margin-left -250?

Looking at most of the examples in bootstrap, I see that sidebars have css of


Why not just have
left: 0px
which would give the same result?


#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;


I noticed in one project that used the practice, there were various @media queries that changed the sidebar to have different widths (and therefore different corresponding values for left and margin-left) at different window sizes.

One feature of doing this is that to hide the sidebar, one could simply call left: 0, and it would move the sidebar by its full width regardless of the current width of the sidebar. This is better than using display: none because it can be animated to slide off of the screen, and different than calling width: 0 because the sidebar could still be visible in the case that it wasn't going off-screen.

For example:

$("button").click(function() {
  $(".sidebar, .content").toggleClass("hiddenSidebar");
body { margin: 0 }
.content {
  left: 100px;
  position: relative;
  transition: all 0.4s ease 0s;
.sidebar {
        width:  100px;
         left:  100px;
  margin-left: -100px;
  height: 500px;
  background: black;
  position: fixed;
  transition: all 0.4s ease 0s;
@media (max-width: 767px) {
  .content { left: 50px; }
  .sidebar {
          width:  50px;
           left:  50px;
    margin-left: -50px;
.hiddenSidebar { left: 0; }
<script src=""></script>
<div class="sidebar"></div>
<div class="content">
  <button>Toggle Sidebar!</button>