THE CSS

/* [THE ENTIRE PAGE] */
html, body {
  padding: 0;
  margin: 0;
}

/* [MAIN-SIDEBAR] */
#page-wrap {
  background: #FFDCDC;
}
#page-wrap::after {
  content: "";
  clear: both;
  display: table;
}
#page-main, #page-sidebar {
  float: left;
  padding: 10px;
  box-sizing: border-box;
}
#page-main {
  width: 70%;
}
#page-sidebar {
  width: 30%;
}

/* [RESPONSIVE] */
@media all and (max-width: 768px) {
  #page-main, #page-sidebar {
    float: none;
    width: 100%;
  }
}

/* [DOES NOT MATTER] */
html, body {
  font-family: arial;
}
#page-sidebar a {
  display: block;
  width: 100%;
}
#page-header, #page-footer {
  padding: 10px;
  box-sizing: border-box;
}
#page-header {
  background: #E6FFDC;
}
#page-footer {
  background: #DCFFFC;
}

How this CSS magic works:

• Frist, we set padding: 0 and margin: 0 on the body. Some browsers generate a margin/padding around the web page by default, and you will get ugly empty spaces if you don’t “flatten” it.
• Set the main contents #page-main and sidebar #page-sidebar to float towards the left, then give them a percentage width. That will display them side-by-side, and is actually all the “magic” you need.
• If you want a left sidebar, float to the right instead.
• By “default”, the floating 
   will cause the container #page-wrap to “collapse”. This will cause the main contents or sidebar to overlap the footer.
• To fix that issue, we add a clear: both to #page-wrap::after. This is known as a clearfix.
• That’s all to the floating method. But to add some good responsive features to it, we finally use @media to “collapse” the float on small screens. So that the main contents are on top, and the sidebar is below.

METHOD 2
INLINE BLOCK

Next, we move on with yet another traditional method, by stacking 2 inline-block elements side-by-side.

THE HTML

2-inline-block.html

  
    PAGE HEADER
    

      
      

        Main contents area.
      

      
      

        One
        Two
        Three
      
    

    
    

Yep, there is no difference with the HTML, as we are still using a similar side-by-side

approach.

THE CSS

2-inline-block.css

/* [THE ENTIRE PAGE] */
html, body {
  padding: 0;
  margin: 0;
}

/* [MAIN-SIDEBAR] */
#page-wrap {
  background: #FFDCDC;
}
#page-main, #page-sidebar {
  display: inline-block;
  vertical-align: top;
  padding: 10px;
  box-sizing: border-box;
}
#page-main {
  width: 70%;
}
#page-sidebar {
  /* Vital to leave some space, so that the sum is not 100% width */
  /* Or a "line-break" will happen for the inline-block */
  width: 27%;
}

/* [RESPONSIVE] */
@media all and (max-width: 768px) {
  #page-main, #page-sidebar {
    width: 100%;
  }
}

/* [DOES NOT MATTER] */
html, body {
  font-family: arial;
}
#page-sidebar a {
  display: block;
  width: 100%;
}
#page-header, #page-footer {
  padding: 10px;
  box-sizing: border-box;
}
#page-header {
  background: #E6FFDC;
}
#page-footer {
  background: #DCFFFC;
}

The inline-block version works pretty much the same as the float, except that we use inline-block to put the main contents and the sidebar side-by-side.

LIMITATION

If you want a left sidebar with this method, you will have to switch the position of 

 and 

 in the HTML; The sidebar should come first, then the main contents next. But unlike using float, this will end up with the sidebar on the top when the responsive @media kicks in – This is why I personally prefer to use the float method.

METHOD 3
FLEX

The CSS flexbox is something that is introduced in CSS3, and a slightly more “modern” solution.

THE HTML

3-flex.html

  
    PAGE HEADER
    

      
      

        Main contents area.
      

      
      

        One
        Two
        Three
      
    

    
    

For you guys who are looking for any difference with the past 2 versions – There is none again.

THE CSS

3-float.css

/* [THE ENTIRE PAGE] */
html, body {
  padding: 0;
  margin: 0;
}

/* [MAIN-SIDEBAR] */
#page-wrap {
  background: #FFDCDC;
  display: flex;
}
#page-main, #page-sidebar {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 10px;
  box-sizing: border-box;
}
#page-main {
  width: 70%;
}

/* [RESPONSIVE] */
@media all and (max-width: 768px) {
  #page-wrap {
    display: block;
  }
  #page-main, #page-sidebar {
    width: 100%;
  }
}

/* [DOES NOT MATTER] */
html, body {
  font-family: arial;
}
#page-sidebar a {
  display: block;
  width: 100%;
}
#page-header, #page-footer {
  padding: 10px;
  box-sizing: border-box;
}
#page-header {
  background: #E6FFDC;
}
#page-footer {
  background: #DCFFFC;
}

No more float, no more inline-block. We set a display: flex on #page-wrap and a width on #page-main – The rest all falls into place automatically.

LIMITATION

The ancient browsers will not be able to understand display: flex, and it does have the same problem as inline-block when it comes to responsiveness – The sidebar will end up on top. So yep, I will personally recommend sticking with the old reliable float.

METHOD 4
HIDDEN OVERLAY

This final method is a little bit on the “advanced” side, but offers a better solution for limited screen sizes.

THE HTML

4-overlay.html

  
    

      

        X
      
      One
      Two
      Three
    

    
    
        ☰
      
      PAGE HEADER
    

      Main contents area.
    

    
    

Alright, this one is definitely different from the rest.

• This example webpage has 4 different sections – The sidebar, header, main contents, and footer.
• You can actually rearrange the layout as you please, but just make sure that the sidebar is a direct child of the body – Also include a button to open the sidebar, a button to close the sidebar.
• Finally, we will need a little bit of Javascript to toggle open/close the sidebar.

THE CSS

4-overlay.css

/* [THE ENTIRE PAGE] */
html, body {
  padding: 0;
  margin: 0;
}

/* [SIDEBAR] */
#page-sidebar {
  background: #333;
  padding: 10px;
  box-sizing: border-box;
  height: 100vh;
  position: fixed;
  z-index: 99;
  width: 200px;
  left: -200px; /* Push out of screen */
  transition: all 0.3s;
}
#page-sidebar.show {
  left: 0;
}

/* [OPEN AND CLOSE BUTTON] */
#p-open-btn, #p-close-btn {
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  padding: 5px;
}
#p-open-btn {
  background: #B53737;
  font-size: 1.2em;
  text-align: center;
}
#p-close-btn {
  font-size: 1.8em;
  float: right;
}

/* [DOES NOT MATTER] */
html, body {
  font-family: arial;
}
#page-sidebar a {
  display: block;
  width: 100%;
  color: #fff;
}
#page-header, #page-main, #page-footer {
  padding: 10px;
  box-sizing: border-box;
}
#page-header {
  background: #E6FFDC;
}
#page-main {
  background: #FFDCDC;
}
#page-footer {
  background: #DCFFFC;
}

The trick to a hidden sidebar menu:

• Set the sidebar to position: fixed, so that it sticks to the page no matter how the user scrolls.
• To make the sidebar take up the entire left side of the screen, we give it a height: 100vh, which is 100% the viewport height. As for the width, it is up to your own decision. I like to keep this under 320 pixels, so that it will not overwhelm the small screens.
• Next, we hide the sidebar out of the screen by giving it a negative left position.
• Finally, we add a .show CSS class, which is just a left: 0 – We will use Javascript to toggle this class to show/hide the sidebar.

EXTRA
DOWNLOAD & MORE

That’s all for the code, and here is the download link as promised – Plus a small extra that may be useful to you.

SOURCE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

CLOSING
WHAT’S NEXT?

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!




The post 4 Ways to Create a Simple CSS Sidebar appeared first on Code Boxx.