Responsive Sidebar

Question

What is the best solution for a responsive sidebar? I have a header area, a content area, a footer area and a sidebar area. For smaller screens I want the sidebar to drop off from the right side and end up underneath the content area and above the footer. How do I do this?

..................................................................................
.                                                                   .            .
.                                Header                             .            .
.....................................................................            .
.                                                                   .            .
.                                                                   .            .
.                                                                   .            . 
.                                                                   .  Sidebar   .
.                                                                   .            .
.                                Content                            .            .
.                                                                   .            .
.                                                                   .            .
..................................................................................
.                                                                                .
.                                Footer                                          .
..................................................................................                                                                                .

Answer 1

Here you have a quick example code I created. http://jsfiddle.net/jtorrescr/CNf8Q/ as mentioned by Kade Keithy, you need to play with your @media to determine in what screen resolution you want to change your layout. So just reset what you are using to create your aside in the @media.

HTML

<div id="container">
    <div id="header">
        Header
    </div>   
    <div id="content">
        Content
    </div>
     <div id="sidebar">
        sidebar
    </div>
    <div id="footer" class="clearfix">
        footer
    </div>
</div>    

CSS

#sidebar
{
    height:60px;
    background-color:orange;
    top:0;
    right:0;
}
#sidebar
{
    width:20%;
    height: 360px;
    float:right;
    margin-top:-360px;
}

#header, #content
{
    width:80%;
}

#header
{
    height:60px;
    background-color:pink;
}
#content
{
    height:300px;
    background-color:yellow;
}
#footer
{
    height:60px;
    background-color:green;
    width:100%;
}

@media (max-width: 500px) 
{    
    #container
    {
        width:100%;
    }
    #sidebar
    {
        width:100%;
        height:60px;
        float:none;
        margin-top:0;
    }
    #header, #content
    {
        width:100%;
    }
}

Answer 2

For this you can use media queries. They allow you to conditionally apply css based on screen size.

Here is an example:

@media (min-width: 700px) {    
  .content {
    float: left;
  }    
}

So what you would likely do is change the float of the sidebar based on screen size.

I recommend this guide for more info: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design