-1

How to create responsive layout for following structure?

Requirements

  • Float sidebar from right 10% over all div .
  • Sidebar height 100%
  • Hidden for below 768px width
  • Footer stick to bottom
  • main div overflow-y:scroll auto;
  • sidebar contains navigation menus
  • overflow hidden for body & wrapper

    <div id="wrapper">
    
        <div class="container">
            <div id="main">
            </div>   
    
            <div id="sidebar">
            </div>
        </div>  
    
        <div id="footer">
            <p>Footer</p>
        </div>  
    
    </div>
    
2
Contributors
1
Reply
19
Views
3 Years
Discussion Span
Last Post by shophiarajan47
0
html, body {
  overflow:hidden;
}
.wrapper {
  overflow:hidden;
}
.main {
overflow-y:scroll auto;
}
.sidebar > div{float:left; height:100% fixed;}
.container .main{width:70%:}
.container .sidebar{width:30%}

to keep footer give fixed height to it.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.