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 to use CSS to control the style of an HTML unordered list?

    How do I vertically align elements within a div in CSS?

    how to create a tirangle and square with ccs only?

    How to target the text in an element but not the text in nested elements with CSS

    How to align images and unordered list

    How to customize ionic style components (lists and tabs with different shapes)

    How to remove border from appearing around the image?

    How to handle text wrapping in CSS? [duplicate]

    how to pause css animation on hover using jquery

    How to adjust an image size with a progressive scaling on viewport resize

    How do I draw the lines of a family tree using HTML CSS?

    LESS - confusion about how mixins take parameters

    How to render CSS conditionally in page

    How can I make these floated divs wrap properly?

    How Can I Make The HTML Page More Narrow?

    how should i set scrollbar properties in css

    CSS How to get rid of border that appears around custom button on and after click

    How can I avoid div overflowing my container without using overflow:hidden?

    I want to apply an existing CSS style to all labels on a page. How?

    css - why my text box is not showing up?

    how to add css to selected row in treegrid GXT 3

    Slideshow using MooTools JavaScript - How can I position slideshow to rescale in browser window

    JS manipulation on CSS and how it result on page rendering

    In a html table cell, how can i force images to be the bottom left and the bottom right that have different heights?

    How to create a horse-shoe-like gauge using CSS

    How can I find which file or code affected to my code in html, css

    How do I get my Bootstrap webpage to have a full width

    How to ease the whole css animation

    How to display css multiple columns with dynamic height

    How to find out an element with id partially matched, and change its css style?