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

Oringas

w3.org/TR/CSS2/visuren.html#dis-pos-flo – Bullet

i.e. "...if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none'..." – Cafard

Use flex-box instead. It's easier and way cleaner. – Cybill

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

Engenia

Side note about your suggestion on using tables: You should not use tables for anything else which doesn't require a table. Don't ever use them for layouts, it's a terrible idea and they won't work when it gets to adjusting the website for mobile (among other things). Their use as layout managers is highly discouraged. Instead, learn CSS and use it the right way. One good read: Don't use tables for layout – Immanent

Answer 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>

Feeder

Answer 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>

Sialagogue

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

Livingston

Answer 5

this is the easiest and the shorter way to split screen.

#container {
  display: grid;
  grid-template-columns: repeat(2, 1fr)
}

#col-1 {
  background-color: purple;
}

#col-2 {
  background-color: pink;
}

<div id="container">
  <div id="col-1">column 1</div>
  <div id="col-2">column 2</div>
</div>

Goodell