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