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.
2
Answers
You can add
display: flex;
to.content
to make them sid by side.To fix the sizing issues you can set the
.sidenav
width withflex-basis: 150px;
(or maybe another value) then addflex-grow: 1;
to.main__home
and it will fill the rest of the width.Full css below:
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 thenposition: absolute
on the side bar. Useright: 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.