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

Solution 1

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

Solution 2

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>

Solution 3

Edit - My description of the problem wasn't fully correct, but the solution works none the less. Floats don't work well with position: fixed

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

#col-2 {
  position: fixed;
  width: 50%;
  left: 50%;
  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>

Solution 4

Your Code also includes a fixed positioning of each div, taking each out of the normal flow of the page, thus stacking them on top of each other.

View more solutions