Basic split screen with css /html

Question

I'm attempting to create two separate divs, one covering the left half of the screen and one covering the right. Why does my code create only one div covering the left half of the page when I have included float:left and float:right? And how can I solve it?

#col-1 {
  position: fixed;
  width: 50%;
  float: left;
  height: 100%;
  background-color: #282828;
  z-index: 1010101010
}

#col-2 {
  position: fixed;
  width: 50%;
  float: right;
  height: 100%;
  background-color: #0080ff;
  z-index: 1010101010
}

<div id="col-1">
  <h1>This is half of a page</h1>
</div>
<div id="col-2">
  <h1>This is another half of a page</h1>
</div>

View on JSFiddle

Answer 1

Using flexbox

.container {
  display: flex;
}

#col-1 {
  background-color: yellow;
  flex: 1;
}

#col-2 {
  background-color: orange;
  flex: 1;
}

<section class="container">
<div id="col-1">
  <h1>This is half of a page</h1>
</div>
<div id="col-2">
  <h1>This is another half of a page</h1>
</div>
</section>

Answer 2

#col-1 {
  position: relative;
  width: 50%;
  float: left;
  height: 100%;
  background-color: #282828;
  z-index: 1010101010
}

#col-2 {
  position: relative;
  width: 50%;
  float: left;
  height: 100%;
  background-color: #0080ff;
  z-index: 1010101010
}

<div id="col-1">
  <h1>This is half of a page</h1>
</div>
<div id="col-2">
  <h1>This is another half of a page</h1>
</div>

This worked for me. I changed position: fixed to relative. Also, they should both be float:left. The one on the right will become scattered if you do float:right for it, they should both be left.

Also, just a suggestion from me, that I like to do on my pages - I'm a big fan of tables, when used appropriately. Tables tend to put things right next to each other, with equal measurements and alignments. It does a lot of the styling work for you. Try doing something with <table>, <tbody>, and <thead> tags.