'How to move sidebar to the right-side of the page?

I'm developing my very first webpage and I would like to move my sidebar to the right-side of the page. It's stock to the bottom and I can't seem to move it. What should I change in my code?

Thank you.

/*sidebar*/
#sidebar{
    margin:0;
    width:250px;
    float: right !important;
    margin-right:50px;
    position:relative;
    padding: 0;
    text-align: left;

}
#sidebarcontents{
    padding:5px 0px 5px 0px;
}
css


Solution 1:[1]

Make sure the maincontent div is float to left and the size is controlled (as in, make sure its not 100%). Check the width of maincontent which is the div to the left and set overflow to hidden

Solution 2:[2]

Here is a sample snippet to help you with.

Idea is to set the parent's position relative and the child (sidebar) position absolute: 

.content {
  position: relative;
}
#sidebar {
  width: 250px;
  margin-right: 50px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  text-align: left;
  border: 1px solid red;
}
#sidebarcontents {
  padding: 5px 0px 5px 0px;
}
<div class="content">
  <div>Here comes my content</div>

  <div id="sidebar">
    <div id="sidebarcontents">Here are the sidebar contents</div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Prince Tegaton
Solution 2 L J

Related Questions