How to align div left and right HTML/CSS without any framework

Question

In my case, I want to implement two side navbar as right and left.

Above image is explained the output that I want to get

Written HTML and CSS files are mentioned below.

:root {
  font-size: 16px;
  font-family: 'Open Sans';
  --bg-color: #23232e;
}

body {
  color: black;
  background-color: white;
  margin: 0;
  padding: 0;
}

main {
  margin-left: 16rem;
  margin-right: 16rem;
  padding: 1rem;
}

.navbar-left {
  position: fixed;
  background-color: var(--bg-color);
  overflow: scroll;
  height: 100vh;
  width: 16rem;
}

.navbar-right {
  position: fixed;
  background-color: var(--bg-color);
  overflow: scroll;
  height: 100vh;
  width: 16rem;
}

<nav class="navbar-left">
  <h1>
    Left Left Left Left Left Left Left Left Left Left Left Left Left Left
  </h1>
</nav>

<main>
  <h1>
    Center Center Center Center Center Center Center Center Center
  </h1>
</main>

<nav class="navbar-right">
  <h1>
    Right Right Right Right Right Right Right Right Right Right Right
  </h1>
</nav>

After running above output, overlap right nav on to the left.

Please help me to fix this issue without any framework.

Does this answer your question? [How to Vertical align elements in a div?](https://stackoverflow.com/questions/79461/how-to-vertical-align-elements-in-a-div) — jeroen81, Mar 18 '20 at 09:59
if position:fixed is a requirement try to add top:0 and right: 0; to .navbar-right. otherwise look for FlexBox or CSS grids — Fabrizio Calderan, Mar 18 '20 at 10:01
Does this answer your question? [div on 3 columns using float](https://stackoverflow.com/questions/39533095/div-on-3-columns-using-float) — Awais, Mar 18 '20 at 10:09
Is there any solution to put navbar it fixed, because if the main centre content is increased side nav and centre alignment will be messed. — YMA, Mar 18 '20 at 10:45
@YMA why do you ask for help when you don't want it? Look at my question in the answer I gave. Your fixation on a fixed layout is wrong. — Dejan.S, Mar 19 '20 at 09:25

score 0 · Answer 1 · answered Mar 18 '20 at 10:08

You could use flex for this. In my example I made so there is a container with display flex, if this is the layout for all of your pages you could add the container style to the body if you like. The sidebars now have the same class as they use the same styling. Question? Hope this helps.

:root {
  font-size: 16px;
  font-family: 'Open Sans';
  --bg-color: #23232e;
}

body {
  color: black;
  background-color: white;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
}

main {
  flex-grow: 1;
  margin-left: 16rem;
  margin-right: 16rem;
  padding: 1rem;
}

.navbar {
  flex-shrink: 0;
  background-color: var(--bg-color);
  overflow: scroll;
  height: 100vh;
  width: 16rem;
}

<div class="container">
  <nav class="navbar">
    <h1>
      Left Left Left Left Left Left Left Left Left Left Left Left Left Left
    </h1>
  </nav>

  <main>
    <h1>
      Center Center Center Center Center Center Center Center Center
    </h1>
  </main>

  <nav class="navbar">
    <h1>
      Right Right Right Right Right Right Right Right Right Right Right
    </h1>
  </nav>
</div>

It works fine. But there is an issue. actually after adding more content to the main, side navbar elements not align. In order to, I want to stay side navbar as fixed. are there any solution for this? — YMA, Mar 18 '20 at 10:38
@YMA sure, just give me an example of content so I can see what the issue is. Kinda hard without. Just a recommendation, do not go with the fixed, absolut position solutions. — Dejan.S, Mar 18 '20 at 11:08

Manjuboyz · Answer 2 · 2020-03-18T10:46:36.883

Check this out, at-least this may get you going.

:root {
    font-size: 16px;
    font-family: 'Open Sans';
    --bg-color: #23232e;
  }

  body {
    color: black;
    background-color: white;
    margin: 0;
    padding: 0;        
  } 

  .navbar-left {
    position: fixed;
    background-color: var(--bg-color);
    overflow: scroll;
    height: 100vh;
    width: 16rem;
  }
   main {
     margin-left:12rem; 
    padding: 1rem;
    height:100vh;
    width: 46rem;
  }

  .navbar-right {
    position:fixed;
    margin-left:58rem;
    background-color: var(--bg-color);
    float:right;
    overflow: scroll;
    height: 100vh;
    width: 16rem;
    top:0;
  }

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="stylesheet" href="style.css" />
        <link
          href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap"
          rel="stylesheet"
        />
      </head>

      <body>
        <nav class="navbar-left">
          <h1>
              Left Left Left Left Left Left Left Left Left Left Left Left Left Left
          </h1>
        </nav>

        <main>
            <h1>
                Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center  Center Center Center Center Center Center Center Center Center 
            </h1>
        </main>

        <nav class="navbar-right">
            <h1>
                Right Right Right Right Right Right Right Right Right Right Right
            </h1>
        </nav>

      </body>
</html>

It works fine. But there is an issue. actually after adding more content to the main, side navbar elements not align. In order to, I want to stay side navbar as fixed. are there any solution for this ? — YMA, Mar 18 '20 at 10:38
@YMA I just updated the code as `fixed` for both left and right column and I also added more content to the center div, you just have to modify the center(Main) `width` for you to work. — Manjuboyz, Mar 18 '20 at 10:47
When I apply this in a responsive situation, It will be an issue — YMA, Mar 18 '20 at 10:58
True, as @Dejan.S said, when you use Fixed layout, the responsiveness will not work since the container will be fixed irrespective of the size. — Manjuboyz, Mar 18 '20 at 11:14

score 0 · Answer 3 · answered Mar 18 '20 at 10:25

Instead of using position: fixed; use position: absolute;, you can then add left: 0px; top:0px; for the left element and right: 0px; top:0px; for the right element.

As follows:

  .navbar-left {
    /* position: fixed; */
    background-color: var(--bg-color);
    overflow: scroll;
    height: 100vh;
    width: 16rem;

    position: absolute;
    left: 0px;
    top:0px;

  }

  .navbar-right {
    /* position: fixed; */
    background-color: var(--bg-color);
    overflow: scroll;
    height: 100vh;
    width: 16rem;

    position: absolute;
    right: 0px;
    top:0px;

  }

How to align div left and right HTML/CSS without any framework

3 Answers3