CODEWITHSUNDEEP
htmlcsscss-floatcss-position
iskandarblue
iskandarblue

Reputation: 7526

Basic split screen with css /html

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

Upvotes: 6

Views: 32445

Answers (5)

wissemzidi
wissemzidi

Reputation: 25

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>

Upvotes: 1

Aldrin
Aldrin

Reputation: 2204

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>

Upvotes: 8

Tanner Babcock
Tanner Babcock

Reputation: 3360

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

Upvotes: 5

LoveHateDevelopment
LoveHateDevelopment

Reputation: 234

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>

Upvotes: 1

s_cicero
s_cicero

Reputation: 155

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.

Upvotes: 1

Related Questions