Unusual 3 column one page website - just center column scrolling

StackOverflow https://stackoverflow.com/questions/22152958

Question

I need some advice on a website design, if and how this could be realized.

OK, the client imagines to have a single/one page responsive website with a 3 column desktop layout like this:

|-|----|-|

Where the center column shall scroll while the rest stays in place. The left column shall furthermore contain some kind of a nav menu, while the right one contains contact info.

I'm fairly experienced but I cannot think of a responsive solution in HTML/CSS as this would mean the center column would have to be outside of the <body>.

So to me, the only realistic thing is some js-based solution similar to those floating social media panels.

Please share your thoughts on this.

Was it helpful?

Solution

Here Fiddle: http://jsfiddle.net/qndjW/772/

HTML:

<div class="wrapper">
  <div id="content">
    <h3>Main content</h3>
   </div>
 </div>
 <div id="overlay">
   <div class="wrapper">
     <div id="sidebar">
         <h3>Sidebar</h3>
     </div>
     <div id="leftsidebar">
        <h3>Sidebar</h3>
     </div>
   </div>
 </div>

CSS

#content {
   background: #bbb;
   width: 50%;
   margin-left: 25%;
}
#overlay {
   position: fixed;
   top: 0;
   width: 100%;
   height: 100%;
}
#overlay .wrapper {
  height: 100%;
}
#sidebar {
  background: #ddd;
  width: 25%;
  float: right;
  max-height: 100%;
}


#leftsidebar {
  background: #ddd;
  width: 25%;
  float: left;
  max-height: 100%;
 }

OTHER TIPS

Try setting your left and right divs style to position : fixed; and then just put them in place with left,right,top,bottom

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top