Fixed column when vertically scrolling. Unfixed when horizontally scrolling. Pure CSS - html

Question

I have a centered page with two columns filling the window height. The left column is fixed, so it is always visible when scrolling. The right column wraps the page content and will be usually larger than the left column.
HTML:
<div class="main-container">
<div class="col1">
<p>Fixed column</p>
</div>
<div class="col2">
<p>Content column</p>
</div>
</div>
CSS:
.main-container {
width: 300px;
height: 100%;
margin: 0 auto;
}
.col1 {
position: fixed;
width: 100px;
height: 100%;
background: fuchsia;
}
.col2 {
width: 200px;
margin-left: 100px;
background: cyan;
}
When the browser window is narrower than the page width (300px in this example), a horizontal scrollbar will appear, and the fixed column will keep fixed and fly over the content column. I want to avoid this.
Can I achieve this vertical-only fixing with pure CSS (no Javascript)?
See the full example Plunker.
Clarification: the vertical scrollbar must be the window scrollbar, not an inner scrollbar in .col2.

Answer 1

I think that in your case you need to use media queries or twitter bootstrap

Answer 2

Demo
css
.col1 {
position: fixed;
width: 100px;
height: 100%;
background: fuchsia;
z-index: 1; /* z-index lower than than .col2 */
}
.col2 {
position: relative; /* position needed for z-index to work */
width: 200px;
margin-left: 100px;
background: cyan;
z-index: 2; /* z-index higher than than .col1 */
}

Answer 3

Just add the CSS property z-index:-1; to the fixed column .col1, It will do the trick

Answer 4

You could work with absolute positioning and overflow on the .col2 container only. This way you still have your fixed column on vertical scroll but not on horizontal scroll.
jsFiddle: http://jsfiddle.net/85fyC/
CSS:
html, body {
height: 100%;
overflow-y: hidden;
}
.main-container {
position: relative;
width: 300px;
height: 100%;
margin: 0 auto;
}
.col1 {
position: absolute;
width: 100px;
height: 100%;
background: fuchsia;
}
.col2 {
width: 200px;
height: 100%;
margin-left: 100px;
overflow: auto;
}
.col2 .inner {
background: cyan;
}
.col2 .inner p {
margin: 0;
}