Layout Help - Sticky borders.

Question

I'm working with a complex layout that has the illusion of sticky borders all around. There is a white frame about all of the content, however on the white frame on the left there is pop out navigation, on the right there is social media icons, on the the top there is the brand logo, and the bottom is black (like an empty sticky footer).

These elements are static. Within these borders, there is content that is meant to scroll up and down.

I have tried using three floated columns, a sticky header (which works), and a sticky footer. My problem here is that the left and right sides of the frame do not maintain a static width and the main content does not stay within the frame. Rather, it overlaps the sticky footer.

Here is an example site that was the inspiration for the site I'm working on. There is lots of animation but we probably won't get too much into that.

http://www.wokine.com/en/

<!DOCTYPE html>
<html>
<head>
  <title>Company Name</title>
  <link rel="stylesheet" type="text/css" href="normalize.css">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

  <body>

    <header class="main-header">
      <p>COMPANY</p>
    </header>

    <div id="wrapper">
      <div class="nav col">
        <p>navigation</p>
      </div>

      <div class="primary col">
        <img src="basketball1.jpg" class="first-img">
        <img src="basketball1.jpg">
        <img src="basketball1.jpg">
        <img src="basketball1.jpg">
        <img src="basketball1.jpg">
        <img src="basketball1.jpg">
      </div>

      <div class="soc-nav col">
        <p>contact</p>
      </div>
    </div>

    <footer>
      <p>This is a footer.</p>
    </footer>
<script src="jquery-3.2.1.min.js"></script>
<script src="scripts.js"></script>

  </body>
</html>

* {
  box-sizing: border-box;
  margin-top: 0;
}

.col, header, footer {
  border: 3px solid red;
}

.main-header {
  background-color: white;
  position: fixed;
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 1em;
  font-style: bold;
  padding-top: 10px;
}

.nav {
  float: left;
  width: 8%;
  margin: 0;
}

.nav p {
  -webkit-transform: rotate(-90deg);
  margin-top: 400px;
}

.primary {
  float: left;
  height: auto;
  width: 84%;
  margin: 0;
}

.primary img {
  height: auto;
  width: 100%;
  margin:0;
  padding: 0;
}

.first-img {
  margin-top: 70px;
}

.soc-nav {
  float: right;
  height: 100%;
  width: 8%;
  padding-top: 400px;
}

.soc-nav p {
  -webkit-transform: rotate(-90deg);
}

#wrapper div {
  min-height: calc(100vh - 25px);
}

footer div {
  height: 25px;
  position: fixed;
  width: 100%;
  text-align: center;
  background-color: white;
}

footer p {
  text-align: center;
}

Answer 1 · 2018-01-14T21:14:42Z

January 14, 2018 9:14pm

In the example provided they are using 'position: fixed;' on the menu item.

If you have most of the other elements in place, then it sounds like you are very close.

I would highly recommend completing the course below which is available on here:

Debugging CSS with Chrome Dev Tools

The time invested in this one will pay you back immediately and you will learn so much more from it.

For example, you can then inspect how they achieved this as well and look at the CSS rules, then give them a try on your site.

Hope this helps.

Welcome to the Treehouse Community

Looking to learn something new?

Timothy Anderson

Timothy Anderson

Layout Help - Sticky borders.

1 Answer

martinjones1

martinjones1

Timothy Anderson

Timothy Anderson