CODEWITHSUNDEEP
htmlcss
Requiem
Requiem

Reputation: 23

Displaying DIVs side by side

I want to display it like this:

. enter image description here

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">
          <a href="https://www.youtube.com/channel/UCWCLrljiADMzumB21isaMbg" target="_blank">> youtube <</a>
        </div>
        <div id="steam">
          <a href="https://steamcommunity.com/id/SevensRequiem/" target="_blank">> steam <</a>
        </div>
        <div id="hub">
          <a href="./t1">> old theme+hub <</a>
        </div>
        <div id="sharex">
          <a href="#">> New ShareX Server <</a>
        </div>
        <div id="tracks">
          <a href="#">tracklist N/A</a>
        </div>
        <div id="user">
          <a href="#">user system N/A</a>
        </div>
        <div id="aura">
          <a href="#">aura sys TBA</a>
        </div>
      </div>
      <div id="rightColumn">
        test
      </div>
    </div>
  </div>
</div>

Upvotes: -1

Views: 108

Answers (4)

php123
php123

Reputation: 149

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).

Upvotes: -1

Lee McAlilly
Lee McAlilly

Reputation: 9316

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.

Upvotes: 0

Amini
Amini

Reputation: 1792

  1. You put the rightColumn inside the leftColumn.
  2. 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">
          <a href="https://www.youtube.com/channel/UCWCLrljiADMzumB21isaMbg" target="_blank">> youtube <</a>
        </div>
        <div id="steam">
          <a href="https://steamcommunity.com/id/SevensRequiem/" target="_blank">> steam <</a>
        </div>
        <div id="hub">
          <a href="./t1">> old theme+hub <</a>
        </div>
        <div id="sharex">
          <a href="#">> New ShareX Server <</a>
        </div>
        <div id="tracks">
          <a href="#">tracklist N/A</a>
        </div>
        <div id="user">
          <a href="#">user system N/A</a>
        </div>
        <div id="aura">
          <a href="#">aura sys TBA</a>
        </div>
      </div>
    </div>
  </div>
  <div id="rightColumn">
    test
  </div>
</div>

Upvotes: 3

Mj Khodadadi
Mj Khodadadi

Reputation: 41

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

Upvotes: 0

Related Questions