How to create responsive layout for following structure?


  • 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 id="sidebar">
        <div id="footer">
html, body {
.wrapper {
.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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.