Displaying DIVs side by side - html

Question

I want to display it like this:
.
However the container wont center / cover the entire screen for the other columns to be side by side (I left out the left/right column in css, because I'm trying to find out how to make it work + the container just defaults to the top left of the screen.) Also how do I get them side by side like the layout, inside the entire screen container?
#container {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.title {
color: #eee;
font-size: 30px;
font-weight: bold;
letter-spacing: 4px;
}
<div class="container">
<div id="leftColumn">
<div class="center">
<h1 class="title">requiem.moe</h1>
<div id="center_wrap">
<div id="yt">
> youtube <
</div>
<div id="steam">
> steam <
</div>
<div id="hub">
> old theme+hub <
</div>
<div id="sharex">
> New ShareX Server <
</div>
<div id="tracks">
tracklist N/A
</div>
<div id="user">
user system N/A
</div>
<div id="aura">
aura sys TBA
</div>
</div>
<div id="rightColumn">
test
</div>
</div>
</div>
</div>

Answer 1

You put the rightColumn inside the leftColumn.
I recommend you using FlexBox. This is modern and most wanted.
* {
padding: 0;
margin: 0;
box-sizing: border-box
}
.container {
width: 100vw;
height: 100vh;
display: flex;
border: 2px solid black
}
.container #leftColumn {
width: 25%;
height: 100%;
background-color: green;
}
.container #rightColumn {
width: 75%;
height: 100%;
background-color: red
}
<div class="container">
<div id="leftColumn">
<div class="center">
<h1 class="title">requiem.moe</h1>
<div id="center_wrap">
<div id="yt">
> youtube <
</div>
<div id="steam">
> steam <
</div>
<div id="hub">
> old theme+hub <
</div>
<div id="sharex">
> New ShareX Server <
</div>
<div id="tracks">
tracklist N/A
</div>
<div id="user">
user system N/A
</div>
<div id="aura">
aura sys TBA
</div>
</div>
</div>
</div>
<div id="rightColumn">
test
</div>
</div>

Answer 2

assign display:flex; flex-direction: row; to your container class. they will cause the left column and right column display in a row.

Answer 3

Don't position your container at all. You even don't need your container. The body element of your html could be the container, but if you do want a container, you could add something like margin: auto (this will center anything relative to its parent element) and height: 100% with width: 100%.
Then, your left column could be something like display: block with width: 30% and your right column display: block with width 70%.
I would consider using a CSS grid layout for this though.
One thing you might find helpful is starting with something like TailwindCSS classes instead of writing your own CSS. It's a good way to learn the underlying CSS as well. For instance, here are the docs for height: 100%.
You can get started with Tailwind by simply including a link to their CND version of the Tailwind stylesheet in the head of your HTML document:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
Use that as your "stylesheet reset" and start playing around with Tailwind layout properties and I think you'll have a better entry point into learning more complex CSS layout.

Answer 4

here is how to split to 2 parts:
.split {top:0; height:100%; position:absolute;}
.left {width:20%; left:0; background-color:purple;}
.right {width:80%; right:0; background-color:green;}
<div class="split left">
<p>something</p>
</div>
<div class="split right">
<p>something</p>
</div>
To split, you need to write 20% for the left part, and 80% to the right part (as you can see in the CSS).
both of the divs need to have full height (as you can see in the CSS).