Reputation: 432

How do I divide a page in three vertical sections?

I want to convert my web page into four section, one horizontal and three vertical. The horizontal section is okay, but there are two issues with vertical sections:

They are not filling the complete screen height.
The third section is overlapping with second section by nearly 10 or 20 pixels.

Here is my CSS:

body{
    width: available;
    height: available;
}

.container{
    width: available;
    height: available;
}

.leftpane{
    width: 25%;
    min-width: 350px;
    height: available;
    min-height: 400px;
    float: left;
    background-color: rosybrown;
    border-collapse: collapse;
}

.middlepane{
   width: 50%;
   min-width: 800px;
   height: available;
   min-height: 650px;
   float: left;
   background-color: royalblue;
   border-collapse: collapse;
}

.rightpane{
    width: available;
    height: available;
    position: relative;
    margin-left: 75%;
    background-color: yellow;
    border-collapse: collapse;
}

.toppane{
    width: available;
    height: 100px;
    border-collapse: collapse;
    background-color: #4da6ff;
}

And this is the HTML page:

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

My output is this:

And I want it to be like this:

Here is a jsfiddle.

Upvotes: 10

Answers (4)

Pedram

Reputation: 16575

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>

Note:

1. I removed all min-width and min-height you don't need these in this case.

2. use height: 100% for your elements also you should set this on body and html tags.

3. left pane should be float: left with width: 25%, right pane float: right width: 25% and middle pane float: left or float: right with width: 50%

that's all!

2022 Update!

Here is updated version via flex:

.container {
  width: 100%;
  height: 100vh;
}

.toppane {
  width: 100%;
  height: 100px;
  background-color: #4da6ff;
}

.leftpane {
  width: 25%;
  height: 100vh;
  background-color: rosybrown;
}

.middlepane {
  width: 50%;
  height: 100vh;
  background-color: royalblue;
}

.rightpane {
  width: 25%;
  height: 100vh;
  background-color: yellow;
}

body {
  margin: 0!important;
}

.d-flex {
  display: flex;
}

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

Upvotes: 13

Atul Gaikwad

Reputation: 21

<html> <head>   <title>Divide Tab </title> <style> 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;
     text-align: center; }

.middlepane {
    width: 50%;
    height: 100%;
    float: left;
    background-color: royalblue;
    border-collapse: collapse;
     text-align: center; }

.rightpane {   width: 25%;   height: 100%;   position: relative;  
float: right;   background-color: yellow;   border-collapse:
collapse;    text-align: center; }

.toppane {   width: 100%;   height: 100px;   border-collapse:
collapse;   background-color: #4da6ff;   text-align: center; }

</style>

</head> <body>  <div class="container">   <div
class="toppane"><h2>Top View</h2></div>   <div class="leftpane">
    <h1>Left View</h1></div>   <div class="middlepane"><h2>Middle View</h2></div>   <div class="rightpane">
    <h1>Right View</h1></div> </div> </body> </html>

Upvotes: 2

mpsbhat

Reputation: 2773

Use the Twitter Bootstrap framework which has a grid system.

EXAMPLE

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen"/>
    </head>

    <body>
        <div class="container">
          <div class="row">
            <div class="col-xs-12 text-center bg-primary" style="height:40px;">Top </div>
          </div>
          <div class="row">
            <div class="col-xs-3 bg-warning" style="height:200px;">left</div>
            <div class="col-xs-6 bg-info" style="height:200px;">Center</div>
            <div class="col-xs-3 bg-danger" style="height:200px;">Right </div>
          </div>
        </div>
    </body>
</html>

Upvotes: 3

Adittya Verma

Reputation: 289

Check here. You'll get the simplest code to divide your screen into three columns.

HTML File

<body>
  <div class="class1" style="background-color:#9BCB3B;">
    <p>Hi</p>
  </div>
  <div class="class2" style="background-color:#1AB99E;">
    <p>Aditya</p>
  </div>
  <div class="class3" style="background-color:#F36F25;">
    <p>This is Working!</p>
  </div>
</body>

CSS File

body {
  width: 100%;
  float: left;
}

.class1,
.class2,
.class3 {
  width: 33.33%;
  float: left;
  height: 100px;
}

p {
  padding-top: 25px;
  text-align: center;
}

Upvotes: 4

How do I divide a page in three vertical sections?

Answers (4)

2022 Update!

Related Questions