Responsive Sidebar

1 Views

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                                          .
..................................................................................                                                                                .
Post Views: 1

Related posts

Leave a Reply

2 comments

  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%;
    }
}