how to align a sidebar to the right with css?


Tags: html,css

Problem :

Am trying to make a simple sidebar, I made this code till now , and I didn't figure out how to make it float to the right , am so confused.

here is a link to jsfiddle

._sidebar {
  position: absolute;
  z-index: 2;
  top: 3rem;
  bottom: 0;
  left: 0;
  margin-top: 1px;
  overflow-x: hidden;
  overflow-y: scroll;
  background: #f9f9f9;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: content-box;
  background-color: rgb(249, 249, 249);
  background-clip: content-box;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}
section {
  outline: 0;
  width: 300px;
  outline-color: initial;
  outline-style: initial;
  outline-width: 0px;
}
aside,
section,
div {
  display: block;
}
body {
  height: 50%;
  margin: 0;
  overflow: auto;
  font: normal 1em/1.7"Open Sans", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 1em;
  line-height: 1.7;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #333;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
._sidebar::-webkit-scrollbar {
  -webkit-appearance: none;
  background-color: rgb(255, 255, 255);
  width: 10px;
}
._sidebar::-webkit-scrollbar-button {
  display: none;
}
._sidebar::-webkit-scrollbar-thumb {
  min-height: 2rem;
  background: #d2d2d2;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: padding-box;
  background-color: rgb(210, 210, 210);
  background-clip: padding-box;
  border: 3px solid #fff;
  border-top-color: rgb(255, 255, 255);
  border-top-style: solid;
  border-top-width: 3px;
  border-right-color: rgb(255, 255, 255);
  border-right-style: solid;
  border-right-width: 3px;
  border-bottom-color: rgb(255, 255, 255);
  border-bottom-style: solid;
  border-bottom-width: 3px;
  border-left-color: rgb(255, 255, 255);
  border-left-style: solid;
  border-left-width: 2px;
  border-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
._list {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 18rem;
  box-shadow: inset -1px 0 #e3e3e3;
}
<section class="_sidebar">
  <div role="navigation" class="_list">

    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>

  </div>
</section>



Solution :

this code is kind of awkward, but if you just want to move this to the right, simply change left:0 to right:0

  ._sidebar {
    position: absolute;
    z-index: 2;
    top: 3rem;
    bottom: 0;
    right: 0;
    margin-top: 1px;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #f9f9f9;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: content-box;
    background-color: rgb(249, 249, 249);
    background-clip: content-box;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
  }
  
  section {
    outline: 0;
    width: 300px;
    outline-color: initial;
    outline-style: initial;
    outline-width: 0px;
  }
  
  aside,
  section,
  div {
    display: block;
  }
  
  body {
    height: 50%;
    margin: 0;
    overflow: auto;
    font: normal 1em/1.7 "Open Sans", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 1em;
    line-height: 1.7;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  
  ._sidebar::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: rgb(255, 255, 255);
    width: 10px;
  }
  
  ._sidebar::-webkit-scrollbar-button {
    display: none;
  }
  
  ._sidebar::-webkit-scrollbar-thumb {
    min-height: 2rem;
    background: #d2d2d2;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: padding-box;
    background-color: rgb(210, 210, 210);
    background-clip: padding-box;
    border: 3px solid #fff;
    border-top-color: rgb(255, 255, 255);
    border-top-style: solid;
    border-top-width: 3px;
    border-right-color: rgb(255, 255, 255);
    border-right-style: solid;
    border-right-width: 3px;
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-left-color: rgb(255, 255, 255);
    border-left-style: solid;
    border-left-width: 2px;
    border-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  
  ._list {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 18rem;
    box-shadow: inset -1px 0 #e3e3e3;
  }
<section class="_sidebar">
  <div role="navigation" class="_list">

    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>
    <a href="#">link1</a>
    <br>

  </div>
</section>


    CSS Howto..

    How can I make these CSS absolute positions work in IE?

    How to align images in a mosaic style? html/css

    How to copy the GTK style of a widget and apply it to another?

    show content block on right above the content on right when displaying on mobile

    How to align p tag side by side using css?

    How do I make my links appear as images, and have them change with hover and so on?

    How to add hover effect to img placed in parent container

    How can I create HTML/CSS responsive tile?

    How to match element containing another element?

    How to combine transforms in CSS?

    how to display navigationMenu div left side of the slider

    Using SASS how to prevent a css file from being generated inside of the SASS folder?

    How to override font-size (em) in this condition?

    How to change active link color in bootstrap css?

    How to center field_with_errors class

    How to get CSS height value (rather than calculated height) in jQuery

    How to reference css in actionlink?

    How can I put an input element on the same line as its label?

    How to set style for a column in an extjs 4 grid [closed]

    How to move links in the middle of the Web page using html/css?

    How to store a global variable in JQuery?

    How to apply an image to a CSS ordered list in WordPress?

    How to put four images 2x2 on other image as background, CSS?

    How to use fadeIn with css property change jquery

    Div style in css, how to start under then button

    How to add a css style class atribute to links generated from wp_get_archives?

    How do I keep parentheses of SASS / SCSS mixin?

    How to style a credit card expiration date input field to include spaces and forward slash?

    How to control spaces/margin between bars?

    How to rotate an image on click and then rotate it back after another click? Using HTML, CSS and jQuery