Question 168519 in CSS Question posted in
Some basic documentation can be found here.

How can I create a left side menu in CSS?

I’m working on a website and I have everything wrapped inside this block of code which sets everything nicely in the middle of the web page and has a width of 780px. I do plan on making it more responsive down the line but for now this is exactly how I want my website to look on large monitors. Because of the width there’s enough room for a small menu that I can place to the very left of the main content. I want this menu to include things like the users first name, job position and other basic information. An example would be how LinkedIn’s page looks after you log in. When I tried including the code it set itself on top of my main content instead of to the left.

.content {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 100%;
  min-height: 100vh;
  padding: 0 1rem;
  width: 780px;
}

.sidenav {
  border: 1px solid black;
}
<main class="content">
  <div class="sidenav">
    ...
  </div>
  <div class="main__home">
    <form action="" method="POST">
      ...
    </form>
  </div>
</main>

What I’ve tried

I have tried using flex and setting the justified-content and align-items both to left but that just stretched the width across the screen. I’ve also tried setting the float to left but that also ruined the width and made everything small. I’ve also moved the sidenav code outside of the content block but all that did was stretch the width to the entire screen.

Tags:

2

Answers


  1. 0

    You can add display: flex; to .content to make them sid by side.
    To fix the sizing issues you can set the .sidenav width with flex-basis: 150px;(or maybe another value) then add flex-grow: 1; to .main__home and it will fill the rest of the width.
    Full css below:

    .content {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 100%;
  min-height: 100vh;
  padding: 0 1rem;
  width: 780px;
  display: flex;
}

.sidenav {
  border: 1px solid black;
  flex-basis: 100px;
}

.main__home {
  flex-grow: 1;
}
    Login or Signup to reply.
  2. 0

    If all you want to do is hang a menu on the left of your main content then use position: relative on your container to create a new containing block then position: absolute on the side bar. Use right: 100% to push it all the way to the left of your block (it sounds counter-intuitive but it pushes the left hand edge of the sidenav all the way beyond the container).

    For screen sizes below your total width, use a media query to change how it displays.

    .content {
  position: relative; /* define a new containing block */
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 100%;
  min-height: 100vh;
  padding: 0 1rem;
  width: 780px;
  border: 1px solid gray;
  border-radius: 0.25rem;
}

.main__home {
  background: lightgray;
}

.sidenav {
  position: absolute; /* added this */
  right: 100%; /* push the right hand edge all the way to the left edge of the container */
  
  /* this is all just prettification */
  border: 1px solid black;
  padding: 0.5rem;
  border-radius: 0.25rem;
  display: flex;
  flex-direction:column;
  gap: 0.5rem;
  background: #333;
  color: white;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<main class="content">
  <div class="sidenav">
     <i class="fa-solid fa-house"></i>
    <i class="fa-solid fa-magnifying-glass"></i>
    <i class="fa-solid fa-circle-info"></i>
  </div>
  <div class="main__home">
    <form action="" method="POST">
      main
    </form>
  </div>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search