Gaurav Mahindra Gaurav Mahindra - 7 months ago 72
HTML Question

how to divide page in 3 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 :-


  1. They are not filling the complete screen height.

  2. Third section is overlapping with second section by nearly 10 or 20 px.



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 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 :-
image of my output

and I want it to be like this :-
enter image description here

I appreciate your help. Here is jsfiddle.

Answer

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!

Comments