Creating a boxed/ framed layout

Question

I would like to create a boxed layout, where the boxed / frame stays in place and the content scroll within it. However I don't want to use the old fashioned scrolling frame method, where you have a panel scroll bar on that panel.

I want to achieve something similar to this > https://pixelgrade.com/demos/themes/?product=border - for this purpose, ignore the content, however you can see the white frame/border that stays in place - that is what I want. And the window has the standard scroll bar, not the frame itself.

I guess I might need to use something link sticky-kit.js however apologies if this is a red herring.

Can anyone point me in the right direction for what my search should begin. And before you ask, I have tried to look into this myself :)

Winter · Accepted Answer · 2016-09-03T19:13:17.437

The simplest thing I can think of is using some fixed divs along the edges to create a border for your box.

.container {
  border: 1px solid red;
  width: 100%;
}
.content {
  height: 1000px;
  background-color: lightblue;
  padding: 50px;
}
.top {
  background-color: white;
  height: 40px;
  position: fixed;
  width: 100%;
  top: 0;
}
.left {
  background-color: white;
  width: 40px;
  position: fixed;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
}
.right {
  background-color: white;
  width: 40px;
  position: fixed;
  height: 100%;
  right: 0;
  top: 0;
  bottom: 0;
}
.bottom {
  background-color: white;
  height: 40px;
  position: fixed;
  width: 100%;
  bottom: 0;
}

<section class="container">
  <section class="content">
    this is my content...
  </section>
  <div class="top"></div>
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
</section>

Here's the alternative solution which allows the border to be transparent (in order to show a background image). It's a little hack that simply hides the scrollbar of the inner div. I highly recommend that if you choose to use this alternative, to make sure that it is apparent that there is more content on the page since there will be no visible scrollbars.

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.wrapper {
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 40px;
  right: 40px;
  background-color: lightblue;
  overflow: hidden;
}

.wrapper2 {
  overflow-y: scroll;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-right: -20px;
  padding: 20px;
}

.content {
  height: 1000px;
}

<div class="container">
  <div class="wrapper">
    <div class="wrapper2">
      <div class="content">
        This is my content...
      </div>
    </div>
  </div>
</div>

This approach only works for when using solid colour background - in this case white. If I want to use a full width canvas image behind the content box, this needs a different approach. Thanks for your idea though Winter — Mike, Sep 01 '16 at 11:38
I'm not sure exactly what you are after, but how about something like this: https://jsfiddle.net/82snax84/ — Winter, Sep 01 '16 at 11:58
Thanks Winter, I had created something like that myself already, what is very similar, however to stop the container ever reaching the bottom, so you gt a complete 'frame' around the content at all times. — Mike, Sep 01 '16 at 13:36
Ok, here's one that does almost what you want: https://jsfiddle.net/82snax84/1/. It uses a little trick I found here (http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page) that offsets the inner div's scrollbar so that it is not visible. The drawback here (except that it is a bit ugly) is that no scrollbar is shown on the page at all, making it difficult for the user to understand that there is more content to be seen. — Winter, Sep 01 '16 at 14:25
Winter, that's great, you've knocked it out the park! I take onboard what you have said about the scrollbars, and I'll work out some other way that visitors will know to scroll down or up. Thank you so much for finding that solution. — Mike, Sep 01 '16 at 14:42
I've updated the answer to show the second solution as well. — Winter, Sep 03 '16 at 19:14

Creating a boxed/ framed layout

1 Answers1