-1

I am trying to place a sidebar right next to the 960px wide Skeleton container. I have successfully done that, but I am looking for a better way to do that, while keeping the container centered on the screen.

https://jsfiddle.net/dgujg9xb/

aside {
    width: 250px;
    float: left;
    margin-left: -170px;
}

By giving it a negative margin, I can float it outside the container it is inside (#holder). However, that is extremely bad and doesn't work that well. By resizing the screen, I want the sidebar to cut so it sits on top instead (like on a phone using media queries), but that seems impossible this way.

Is there a better way to structure this? I am willing to use a JavaScript library as long as it works very well.

MortenMoulder
  • 6,138
  • 11
  • 60
  • 116

2 Answers2

0

Make the sidebar absolute and place it independent and above with z-index from the rest of the layout.

  • Note I commented 960px width from #holder just for demonstration (since snippet viewport is smaller it would overflow otherwise), also added sidebar jQuery toggle for the same purpose.

Your fiddle: enter image description here

My fiddle: enter image description here

External Fiddle if you wish to resize

Snippet below:

$(".container").on("click", function() {
  $("aside").toggleClass("showAside");
});
* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
#holder {
  /* width: 960px; */
  position: relative;
  margin: 0 auto;
  height: 100%;
}
aside {
  width: 250px;
  background: black;
  color: white;
  position: absolute;
  top: 0;
  left: -170px;
  z-index: 1;
  transition: all .4s ease-in;
}
.showAside {
  left: 0;
}
.container {
  border: 1px solid black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
  <aside>
    Sidebar goes here
  </aside>
  <div class="container">
    Hello - click to show/hide sidebar
  </div>
</div>
Syden
  • 8,425
  • 5
  • 26
  • 45
  • That is not placed right next to the container as mine is (with a few pixels margin). – MortenMoulder Jan 23 '17 at 21:10
  • ah you want that bit to be visible? There it's added, note that it will overflow the content since viewport is smaller on snippet. – Syden Jan 23 '17 at 21:12
  • No. I want the sidebar to stick to the container, while keeping the container centered. "I am trying to place a sidebar right next to the 960px wide Skeleton container" is the first sentence of my question. – MortenMoulder Jan 23 '17 at 21:19
  • The sidebar is sticking next to the container with the exact same values you used, only it is independent and will not push anything once it fades in.. check the external fiddle.. – Syden Jan 23 '17 at 21:55
  • Then let me ask, why is yours different than mine? – MortenMoulder Jan 23 '17 at 21:57
  • I took it out from the answer as well. There you have both fiddle screenshot, they look exactly the same, the only difference were margin & padding resets which is just good practice, I apologize in that case if that was confusing & unnecessary. – Syden Jan 23 '17 at 22:06
0

I've made a Codepen of something that may be of use, you can alter the content and styling in there and see. The content container has a fixed width, then collapses when things don't fit neatly. I've also popped in the Sass and HTML here. This should just be an example of how it could be achieved, in the real thing you're probably better off using percentages for obvious responsivity reasons.

http://codepen.io/BlitZ_UK/pen/GrEExr

The styling is done in Sass;

.page-container {

  background: #607D8B;
  min-height: 100vh;

}

.content {
  padding: 10px 20px  
}

.sidebar {
  background: #009688;  
}

.inner-wrapper {

  background: #00bcd4;
  margin: 0 auto;
  max-width: 960px;
  position: relative;

}

@media all and (min-width: 1362px) {

  .sidebar {
    width: 200px;
    position: absolute;
    left: 0;
    transform: translateX(-100%);

  }

}

And the HTML;

<div class="page-container">

  <div class="inner-wrapper">

    <div class="sidebar">

      <ol>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum dolor.</li>
      </ol>

    </div>

    <div class="content">

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt facere expedita voluptatem reprehenderit, asperiores architecto magni laborum repellat perferendis voluptas alias autem cumque iste dignissimos ab officiis totam blanditiis ratione.</p>

    </div>

  </div>

</div>

Hope it helped.

Mike Sheward
  • 315
  • 1
  • 7