Put left-sidebar on top of body in main page

Question

I have a problem with CSS. I created a left-sidebar for Sub-Categories in this case it showed at the bottom of main page like this

How to put Sub-Categories on the position of the red arrow?

sidebar in Categories.chtml:

<div id="sidebar">
                Go To...
             <ul>
                    @foreach (var item in @ViewBag.Menu)
               {
                <li> <a href="@Url.Content("~/Bike/Categories/"+item.Id+"?name="+item.Name+"&class=image")">@item.Name</a>
                </li>
                    }
            </ul>
        </div>

My CSS:

#sidebar {
           width: 15%;
           margin-right: 20%; 
        }

In _Shared.chtml:

<div id="main">
        @RenderBody()
     </div>
<div id="footer">
         built with <a target="_blank" href="http://asp.net/mvc"> ASP.NET MVC 4</a>
         <button style="margin-left: 25px; float:left">Slide Toggle</button>
 </div>