How to Divide a Page in Three Vertical Sections

How do I divide a page in three vertical sections?

First, width: available is not valid property. if you want to use all available space you should set width: 100%. anyway, for solving your issue you should use height: 100% also for body and html. see this example:

body, html {  width: 100%;  height: 100%;  margin: 0;}
.container {  width: 100%;  height: 100%;}
.leftpane {    width: 25%;    height: 100%;    float: left;    background-color: rosybrown;    border-collapse: collapse;}
.middlepane {    width: 50%;    height: 100%;    float: left;    background-color: royalblue;    border-collapse: collapse;}
.rightpane {  width: 25%;  height: 100%;  position: relative;  float: right;  background-color: yellow;  border-collapse: collapse;}
.toppane {  width: 100%;  height: 100px;  border-collapse: collapse;  background-color: #4da6ff;}

<div class="container">  <div class="toppane">Test Page</div>  <div class="leftpane">    <h1>Test Page</h1></div>  <div class="middlepane">Test Page</div>  <div class="rightpane">    <h1>Test Page</h1></div></div>

Create 3 vertical split layout using html and css

Welcome to Stack Overflow _

To neaten the code put the flex & height elements into CSS classes

// parent div
.flexDisplay { 
     flex: 1;
     height: 100%;
}

// child divs
.flexHeight {
     display: flex;
     height: 100%;
}

.flexHeightResize {
     display: flex;
     height: 50%; // adjust percentage as required
}

then add to HTML

<div class="flexDisplay" style="background-color:Lime;">
    <div class="flexHeight" style="background-color:Blue;">
    A
    </div>
    <div class="flexHeightResize" style="background-color:Gray;">
    B
    </div>
    <div class="flexHeight" style="background-color:Aqua;">
    C
    </div>
</div>

body,html {    height: 100%;    padding: 0;    margin: 0;}
.flexDisplay {    display: flex;    height: 100%;}
.flexHeight {     flex: 1;    height: 100%;}
.flexHeightResize {     flex: 1;    height: 50%; // adjust percentage as required}

<body>    <div class="flexDisplay" style="background-color:Lime;">        <div class="flexHeight" style="background-color:Blue;">        A        </div>        <div class="flexHeightResize" style="background-color:Gray;">        B        </div>        <div class="flexHeight" style="background-color:Aqua;">        C        </div>    </div></body>

Splitting a div in three vertical parts

Remove this line:
<br style="clear:both;"/>

How to split web page screen horizontally into 3 equal pieces?

You can use flexbox:

.container {  display: flex;  justify-content: space-between;}.container div {  width: 100%;  padding: 5px;  border: 1px solid black;}

<div class="container">  <div>1</div>  <div>2</div>  <div>3</div></div>

How to divide a webpage in three vertical parts?

Did some changes in your CSS code. You have to set the position of the middle section on hover like below

.split.middle {
  left: 33.333%;
}

.hover-left .middle {
  left: 70%;
}

.hover-middle .middle {
  left: 15%;
}

.hover-right .middle {
  left: 13%;
}

const left = document.querySelector(".left");const middle = document.querySelector(".middle");const right = document.querySelector(".right");const container = document.querySelector(".container");
left.addEventListener("mouseenter", () => {  container.classList.add("hover-left");});
left.addEventListener("mouseleave", () => {  container.classList.remove("hover-left");});
middle.addEventListener("mouseenter", () => {  container.classList.add("hover-middle");});
middle.addEventListener("mouseleave", () => {  container.classList.remove("hover-middle");});
right.addEventListener("mouseenter", () => {  container.classList.add("hover-right");});
right.addEventListener("mouseleave", () => {  container.classList.remove("hover-right");});

:root {  --container-bg-color: #333;  --left-bg-color: rgba(223, 39, 39, 0.7);  --left-button-hover-color: rgba(161, 11, 11, 0.3);  --middle-bg-color: rgba(39, 217, 223, 0.7);  --middle-button-hover-color: rgba(14, 32, 196, 0.151);  --right-bg-color: rgba(43, 43, 43, 0.8);  --right-button-hover-color: rgba(92, 92, 92, 0.3);  --hover-width: 70%;  --other-width: 15%;  --speed: 1000ms;}
html,body {  padding: 0;  margin: 0;  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  width: 100%;  height: 100%;  overflow-x: hidden;}
h1 {  font-size: 3rem;  color: #fff;  position: absolute;  left: 50%;  top: 20%;  transform: translateX(-50%);  white-space: nowrap;}
.button {  display: block;  position: absolute;  left: 50%;  top: 40%;  height: 2.5rem;  padding-top: 1.3rem;  width: 15rem;  text-align: center;  color: #fff;  border: #fff solid 0.2rem;  font-size: 1rem;  font-weight: bold;  text-transform: uppercase;  text-decoration: none;  transform: translateX(-50%);}
.split.left .button:hover {  background-color: var(--left-button-hover-color);  border-color: var(--left-button-hover-color);}
.split.middle .button:hover {  background-color: var(--middle-button-hover-color);  border-color: var(--middle-button-hover-color);}
.split.right .button:hover {  background-color: var(--right-button-hover-color);  border-color: var(--right-button-hover-color);}
.container {  position: relative;  width: 100%;  height: 100%;  background: var(--container-bg-color);}
.split {  position: absolute;  width: 33.33%;  height: 100%;  overflow: hidden;}
.split.left {  left: 0;  background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;  background-size: cover;}
.split.left:before {  position: absolute;  content: "";  width: 100%;  height: 100%;  background: var(--left-bg-color);}
.split.middle {  left: 33.333%;  display: inline-block;  background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;  background-size: cover;}
.split.middle:before {  position: absolute;  content: "";  width: 100%;  height: 100%;  background: var(--middle-bg-color);}
.split.right {  right: 0;  background: url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat;  background-size: cover;}
.split.right:before {  position: absolute;  content: "";  width: 100%;  height: 100%;  background: var(--right-bg-color);}
.split.left,.split.middle,.split.right,.split.right:before,.split.left:before,.split.middle:before {  transition: var(--speed) all ease-in-out;}
.hover-left .left {  width: var(--hover-width);}
.hover-left .middle {  width: var(--other-width);  left: 70%;}
.hover-left .right {  width: var(--other-width);}
.hover-left .middle:before {  z-index: 2;}
.hover-middle .middle {  width: var(--hover-width);  left: 15%;}
.hover-middle .left {  width: var(--other-width);}
.hover-middle .right {  width: var(--other-width);}
.hover-middle .right:before {  z-index: 2;}
.hover-right .right {  width: var(--hover-width);}
.hover-right .middle {  width: var(--other-width);  left: 15%;}
.hover-right .left {  width: var(--other-width);}
.hover-right .middle:before .left:before {  z-index: 2;}
@media(max-width: 800px) {  h1 {    font-size: 2rem;  }  .button {    width: 12rem;  }}
@media(max-height: 700px) {  .button {    top: 70%;  }}

<body>  <div class="container">    <div class="split left">      <h1>The Designer</h1>      <a href="#" class="button">Read More</a>    </div>
    <div class="split middle">      <h1>The Middle</h1>      <a href="#" class="button">Read More</a>    </div>
    <div class="split right">      <h1>The Programmer</h1>      <a href="#" class="button">Read More</a>    </div>  </div>  <script src="js/main.js"></script></body>

Dividing a page into two vertical and identical sections with border

Use width: 50%; and box-sizing: border-box on .section1 and .section2.

body{ color:#fff; font-size:100pt;}.section1{ background-color:#11181e; width:50%; float:left; height:100vh; border-right: 1vw solid #F5E5D6;     box-sizing: border-box;    margin:0;    padding:0; }.section2{ background-color:#f1c40f; width:50%; float:left; height:100vh; margin:0; padding:0;  box-sizing: border-box;}

<div class="section1">2d</div><div class="section2">3d</div>

Divide page into 3 sections with css

Since you're using Twitter Bootstrap 3, you can start with the "Sticky footer navbar" template which is in the examples folder in the zip file you get from http://getbootstrap.com/ homepage.

Getting rid of the sticky navbar:
open the index.html and go to row 31, it has this:

<div class="navbar navbar-default navbar-fixed-top">

Just remove the navbar-fixed-top from the class attribute.

Making container 600px wide:
Create your own css file, include it in your HEAD part of the index.html and add there

#wrap > .container {
    width: 600px;
}

You also need to add mediaqueries to overwrite the basic tb3 styles for smaller viewport-sizes and add that 600px there. So below that type:

@media (max-width: 1199px) {
    #wrap > .container {
        width: 600px;
    }
}

@media (max-width: 991px) {
    #wrap > .container {
        width: 600px;
    }
}

@media (max-width: 767px) {
    #wrap > .container {
        width: 100%;
    }
}

@media (max-width: 480px) {
    #wrap > .container {
        width: 100%;
    }
}

those 100% widths are there because you'll lose the responsive width for your site if you force the page to be 600px wide under that width.

And the last part, centering vertically. Are you sure you need it? How much there will be information on the page? Does it vary much? What happens when you view the site for example with mobile device? You can achieve it using HTML & CSS only adding couple of more divs and some css.

In the index.html file wrap the container div like this:

<div class="outercontainer">
   <div class="middlecontainer">
      <div class="container">
        Content
      </div>
   </div>
</div>

And change the #wrap > .container part of the CSS to:

.outercontainer {
  display: table;
  height: 100%;
  position: absolute;
  width: 100%;
}

.middlecontainer {
  display: table-cell;
  padding: 65px 0; /*For your header and footer*/
  vertical-align: middle;
}

.container {
  height: auto;
  margin: 0 auto;
  max-width: 600px;
  position: relative;
}

Here's a Codepen of the vertical centering: http://codepen.io/anon/pen/Gposw

You may need some tweaks to get it work like you want it but using these gives you good start.