Trying to add white space above a sidebar border without pushing content down

[jtrinker]

I have a sidebar on my site that starts about halfway down the browser and goes to the bottom, on the right side. I’m trying to add a left border to the sidebar to separate it from the main content. However, I don’t want the border to go to the top of the div. Right now it does and runs into the full width banner at the top of the browser. So I’m trying to add some white space between the end of the banner and the start of the border.

I can’t just add margin or padding to the top because that adds space to the top of the content within the sidebar. And I would like the content inside the sidebar to be flush with the top of the border, creating white space between the full width top banner at the top, the sidebar border and the sidebar content. In short, I would like the my sidebar content to be even with the top of the border, but there be space separating these from the top banner.

<div class="large-3 columns sidebar">
<div class="sidebar-container">
        <h1>sidebar</h1>
        <ul>
            <li>About</li>
            <li>Conditions</li>
            <li>Programs</li>
            <li>Testimonials</li>
        </ul>
</div>
   </div>

.sidebar-container {
  margin-top: 46px;
  padding-left: 30px;
  height: 100%;
  border-left-style: solid;
  border-left-width: 1px;

  ul {
    list-style-type: none;
      }
   }

I hope that makes sense. Thanks!

[Paulie_D]

Could you please put something in Codepen?

[georgearnall]

We can’t help you much without a visual representation but could you use this ?

[jtrinker]

I apologize for the lack of visuals, but yes, that is exactly what I’m trying to do. Thank you!

[georgearnall]

:)

[Author]

Posts