Clever Geek Handbook

Fixed column when scrolling vertically. Unfixed on horizontal scrolling. Pure CSS

I have a centered page with two columns filling the height of the window. the left column is fixed , so it always shows when scrolling. the right column wraps the page content and will usually be 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 snap and fly over the content column . I want to avoid this .

Is it possible to achieve this vertical fixing with pure CSS (no Javascript)?

See the complete Plunker example .

Clarification: the vertical scrollbar must be the scrollbar of the window , not the inner scrollbar in .col2

.

+3


source to share


4 answers


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 */
}
+1


source


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



0


source


Just add CSS property z-index:-1;

to fixed column .col1

, it will do the trick

0


source


You can only work with absolute positioning and overflow in the .col2 container. This way you still have a fixed column on vertical scrolling, but not on horizontal scrolling.

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;
}
0


source






More articles:


All Articles