I am building a website that focuses on helping individuals with university admissions. I am about to apply to universities and I felt like my concerns and troubles are the same as others. My problem here is that the side bar and the main "content" won't appear side by side and I have tried everything within my power to absolve the problem. Could anyone help me :) This is the html code
<div class= "sidenav">
<a href = "">Latest Blog Posts</a>
<a href = " ">Why You are more successful than you think</a>
</div>
<div class= "main">
<div class= "content">
<div class="card">
<h1 style="font-size: 50px;">Submit!</h1>
<p style="font-size: 20px">Thank you for considering working with
DaddyChill and submitting!<br>Submitting your notes will mean that
you've helped someone with their highschool test!<br> If you want to
submit just click the link below!<br>
</div>
</div>
This is the css:
.content{
position: relative;
background: rgba(0, 0, 0, 0.5);
color: rgba(0, 0, 0, 0.5);
padding:20px;
}
.card{
background-color: white;
}
.sidenav{
height: 100%;
width: 160px;
position: relative;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a{
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
}
.sidenav a:hover{
color: yellow;
}
.main{
margin-left: 160px;
font-size: 28px;
padding: 1px 10px;
}
@media screen and (max-height: 450px){
.sidenav {padding-top:15px;}
.sidenav a { font-size: 18px}
}
Added grid support to your example. You'll need to tweak your paddings and margins but your layout should work.
.container {
grid-column: 1 / -1;
grid-gap: 36px;
display: grid;
grid-template-columns: 200px auto;
align-items: flex-start;
flex-direction: column;
}
.content {
position: relative;
background: rgba(0, 0, 0, 0.5);
color: rgba(0, 0, 0, 0.5);
padding: 20px;
}
.card {
background-color: white;
}
.sidenav {
height: 100%;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
}
.sidenav a:hover {
color: yellow;
}
.main {
font-size: 28px;
padding: 1px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
<div class="container">
<div class="sidenav">
<a href="">Latest Blog Posts</a>
<a href=" ">Why You are more successful than you think</a>
</div>
<div class="main">
<div class="content">
<div class="card">
<h1 style="font-size: 50px;">Submit!</h1>
<p style="font-size: 20px">Thank you for considering working with
DaddyChill and submitting!<br>Submitting your notes will mean that
you've helped someone with their highschool test!<br> If you want to
submit just click the link below!<br>
</div>
</div>
</div>
</body>
</html>