Reputation: 940

Html/css side bar does not appear correctly on the right side of the page

I want to create a side bar with HTML and CSS that appears on the right side of my page, but float:right doesn't work correctly and when I remove the position:fixed and change it to relative, the height becomes small. How can I make the exact sidebar but on the right side? I want it to be responsive too. Here's the sidebar code:

.side-drawer {
    height: 100%;
    background-color: #463f4f;
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    width:60%;
    max-width: 300px;
    z-index: 200;
    float: right;
    position: fixed;
}

const sideDrawer = props => (
  <nav className='side-drawer'>
    {/* add routers later */}
    <ul>
      <li><a href='/'>داشبورد</a></li>
      <li><a href='/'>اطلاعات پایه</a></li>
      <li><a href='/'>بیمه تکمیلی</a></li>
      <li><a href='/'>آموزش</a></li>
      <li><a href='/'>مدیریت عملکرد</a></li>
      <li><a href='/'>اطلاعات مالی</a></li>
      <li><a href='/'>بازخورد</a></li>
    </ul>
  </nav>
)

Upvotes: 1

Answers (4)

Silviu-Marian

Reputation: 10907

Just in case you need finer and more consistent control, I recommend you learn and use CSS Flexbox. Here is a resource to help learn. More advanced needs can use grid layout

Your code then becomes:

.layout {
  display: flex; /* use flexbox */
  align-items: stretch; /* stretch vertically */
  justify-content: stretch; /* stretch horizontally */
}

.container {
  flex: 1 1 auto; /* will be stretched and compressed first, starting with whatever */
  padding: 20px;
}

.sideDrawer {
  flex: 0 0 300px; /* will not be stretched nor compressed, and will start at 300px */
  background-color: #463f4f;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 16px;
  padding: 20px;
}


      <div className='layout'>
        <div className='container'>
          Content goes here
        </div>
        <nav className='sideDrawer'>
          {/* add routers later */}
          <ul>
            <li>
              <a href='/'>داشبورد</a>
            </li>
            <li>
              <a href='/'>اطلاعات پایه</a>
            </li>
            <li>
              <a href='/'>بیمه تکمیلی</a>
            </li>
            <li>
              <a href='/'>آموزش</a>
            </li>
            <li>
              <a href='/'>مدیریت عملکرد</a>
            </li>
            <li>
              <a href='/'>اطلاعات مالی</a>
            </li>
            <li>
              <a href='/'>بازخورد</a>
            </li>
          </ul>
        </nav>
      </div>

I also adjusted the box-shadow so that it's on the other side

Upvotes: 1

Sajeeb Ahamed

Reputation: 6390

You don't need to use float. If you make position: fixed; of your right sidebar then make sure that the right position is zero.

.wrapper {
    position: relative;
}

.body {
    width: 70%;
    height: 100%;
    padding: 20px;
}

.right-sidebar {
    width: 25%;
    padding: 20px;
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <div class="body">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio . Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
            </p>
        </div>
        <div class="right-sidebar">
            <ul>
                <li>Home</li>
                <li>Projects</li>
                <li>Services</li>
                <li>About</li>
                <li>Contac</li>
            </ul>
        </div>
    </div>
</body>
</html>

Upvotes: 1

Roy

Reputation: 8069

Change your CSS to this:

.side-drawer {
    height: 100%;
    background-color: #463f4f;
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.5);
    top: 0;
    right: 0;
    width:60%;
    max-width: 300px;
    z-index: 200;
    position: fixed;
    display: block;
}

The float: right; should be removed, since you’re using a fixed position. Also the left should be right: 0, since you want it on the right side of your document.

Upvotes: 2

Pedram Gholizadeh

Reputation: 178

Try :

Display:block;

and remove this code :

Float:right;

if you set position as fixed , you need to set display as block attr.

Upvotes: 0

Html/css side bar does not appear correctly on the right side of the page

Answers (4)

Related Questions