I'm still very new to CSS, and I'm just trying to understand the basic concepts of flex, so there is probably a lot of wrong with my code so far, but I'm open to learning!! I am self-taught currently, which is why I'm coming here :)
Like I said, I'm very much a beginner, so please educate me! I am trying to place this content next to the sidebar? I understand that grid is most likely the best way to go about this, however I'm trying to do it with flex first before I do it with grid and delve more into that concept, since it seems a bit more complicated!
The following code:
html,
body {
background-color: rgb(65, 75, 113);
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: "Corben";
src: url(Corben/Corben-Regular.ttf);
}
@font-face {
font-family: "Archivo";
src: url(Archivo_Black/ArchivoBlack-Regular.ttf);
}
@font-face {
font-family: "Outfit";
src: url(Outfit/static/Outfit-Regular.ttf);
}
@font-face {
font-family: "Outfit-black";
src: url(Outfit/static/Outfit-Black.ttf);
}
@font-face {
font-family: "Cormorant-semibold";
src: url(Cormorant/static/Cormorant-SemiBold.ttf);
}
@font-face {
font-family: "Cormorant";
src: url(Cormorant/static/Cormorant-Regular.ttf);
}
.container {
outline: white 1px solid;
height: 100vh;
width: 100vw;
/* get rid of this... or play around w it */
display: flex;
flex-direction: column;
}
.top-header {
/* outline: 1px rgb(255, 0, 0) solid; */
background-color: rgb(43, 38, 111);
width: 100%;
height: 35lvh;
/* how to center text within a div */
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#heading-text {
font-family: Archivo;
color: white;
font-size: 5vh;
font-weight: 1000;
letter-spacing: 0.5dvh;
/* headers come with margin at the top so get rid of that */
margin-top: 0;
}
#header-pic {
/* outline: 1px blue solid; */
height: 100%;
position: absolute;
right: 0;
}
.sidebar {
height: 100lvh;
width: 150px;
padding-top: 40px;
background-color: rgb(255, 255, 255);
padding: 10px;
font-size: 3lvh;
}
li {
list-style: none;
}
a {
text-decoration: none;
/* border: 1px red solid; */
margin: 10px;
}
.main-body {
outline: 1px deeppink solid;
background-color: bisque;
float: right;
}
.main-body article {
align-items: flex-end;
justify-content: end;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> yyeesss ❀*ੈ✩‧₊ </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<style></style>
<body>
<div class="container">
<section class="top-header">
<header>
<h1 id="heading-text"> Braaahhhhhh </h1>
</header>
<img id="header-pic" src="cool-pic.jpg" alt="idk some filler i guuueeessss">
</section>
<aside class="sidebar">
<hr>
<ul>
<li>
<a href="#"> Home </a>
</li>
<li>
<a href="#"> About us </a>
</li>
<li>
<a href="#"> Location </a>
</li>
<li>
<a href="#"> Contact us </a>
</li>
</ul>
<hr>
</aside>
<article class="main-body">
<div id="subheader-body">
<h1> This is an article YEAH BABIIEEEE </h1>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi accusamus asperiores, velit nihil incidunt tempore odio totam, vitae aliquam perferendis laborum doloremque excepturi ad deleniti aspernatur laudantium, veniam earum placeat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis quos illum velit ea minima. Perspiciatis blanditiis, magnam assumenda, culpa maxime sed consequuntur adipisci placeat laudantium deserunt nemo, ipsam reprehenderit at? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum asperiores dolore ea vel, corporis nesciunt et autem nobis repellendus consequatur earum ad minima, delectus consectetur voluptatibus voluptate eos, reprehenderit iure. </p>
</div>
</article>
</div>
</body>
</html>so probably the best way to do this would be to wrap both your .sidebar and your .main-body in a container div and then display the container div as flex.
So simply all I did was wraped then in the div with class .main-continer and added this to CSS
.main-container {
display: flex;
}
Then I changed your width of the side bar to min-width instead.
Here it is working
html, body {
background-color: rgb(65, 75, 113);
margin:0;
padding:0;
box-sizing: border-box;
}
@font-face {
font-family: 'Corben';
src: url(Corben/Corben-Regular.ttf);
}
@font-face {
font-family: 'Archivo';
src: url(Archivo_Black/ArchivoBlack-Regular.ttf);
}
@font-face {
font-family: 'Outfit';
src: url(Outfit/static/Outfit-Regular.ttf);
}
@font-face {
font-family: 'Outfit-black';
src: url(Outfit/static/Outfit-Black.ttf);
}
@font-face {
font-family: 'Cormorant-semibold';
src: url(Cormorant/static/Cormorant-SemiBold.ttf);
}
@font-face {
font-family: 'Cormorant';
src: url(Cormorant/static/Cormorant-Regular.ttf);
}
.container {
outline: white 1px solid;
height: 100vh;
width: 100vw;
/* get rid of this... or play around w it */
display: flex;
flex-direction: column;
}
.top-header {
/* outline: 1px rgb(255, 0, 0) solid; */
background-color: rgb(43, 38, 111);
width: 100%;
height: 35lvh;
/* how to center text within a div */
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#heading-text {
font-family: Archivo;
color: white;
font-size: 5vh;
font-weight: 1000;
letter-spacing: .5dvh;
/* headers come with margin at the top so get rid of that */
margin-top: 0;
}
#header-pic {
/* outline: 1px blue solid; */
height: 100%;
position: absolute;
right: 0;
}
.sidebar {
height: 100lvh;
min-width: 150px;
padding-top: 40px;
background-color: rgb(255, 255, 255);
padding: 10px;
font-size: 3lvh;
}
li {
list-style: none;
}
a {
text-decoration: none;
/* border: 1px red solid; */
margin: 10px;
}
.main-body {
outline: 1px deeppink solid;
background-color: bisque;
float: right;
}
.main-container {
display: flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> yyeesss ❀*ੈ✩‧₊ </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<style>
</style>
<body>
<div class="container">
<section class="top-header">
<header><h1 id="heading-text">
Braaahhhhhh
</h1></header>
<img id="header-pic" src="cool-pic.jpg" alt="idk some filler i guuueeessss">
</section>
<div class="main-container">
<aside class="sidebar">
<hr>
<ul>
<li>
<a href="#"> Home </a>
</li>
<li>
<a href="#"> About us </a>
</li>
<li>
<a href="#"> Location </a>
</li>
<li>
<a href="#"> Contact us </a>
</li>
</ul>
<hr>
</aside>
<article class="main-body">
<div id="subheader-body">
<h1>
This is an article YEAH BABIIEEEE
</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi accusamus asperiores, velit nihil incidunt tempore odio totam, vitae aliquam perferendis laborum doloremque excepturi ad deleniti aspernatur laudantium, veniam earum placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis quos illum velit ea minima. Perspiciatis blanditiis, magnam assumenda, culpa maxime sed consequuntur adipisci placeat laudantium deserunt nemo, ipsam reprehenderit at?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum asperiores dolore ea vel, corporis nesciunt et autem nobis repellendus consequatur earum ad minima, delectus consectetur voluptatibus voluptate eos, reprehenderit iure.
</p>
</div>
</article>
</div>
</div>
</body>
</html>