Menu
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:
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.
735
Go to Layout > Breaks, and then choose the type of section break you want. Next Page Starts the new section on the following page. Continuous Starts the new section on the same page. This section break is particularly useful for documents that have columns.
Using float and margin The left div is styled with width:50% and float:left – this creates the green colored div that horizontally covers half of the screen. The right div is then set to margin-left:50% – this immediately places it to the right of the left div.
To make a vertical line, use border-left or border-right property. The height property is used to set the height of border (vertical line) element. Position property is used to set the position of vertical line. Example 1: It creates a vertical line using border-left, height and position property.
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!
122
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
