Search code examples
htmlcssstrip

create vertical strip in HTML or CSS

I am absolutely beginner in HTML and CSS. What I would like to do is to create a strip in the left hand side of a webpage, similar to this: https://www.inside.com/all

The strip has a number of clickable icons, and when one slides down the page, the strip and logos stay at the same location.

Is there any way to look at the page source and find out how it is implemented? If not, I appreciate any help on how to go about this.

Solution

  • The key is using position: fixed; and height: 100%;.

    CSS code

    .verticalStrip {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  background-color: grey;
  height:100%;
}

.content {
  padding-left: 250px;
}

    HTML Code

    <div class="content"> content of the page....</div>

    working demo: http://jsfiddle.net/h85er/