how to divide html page into two parts vertically?

Today, We want to share with you how to divide html page into two parts vertically.In this post we will show you How To Create a Two Column Layout, hear for how to divide web page in 2 vertical columns we will give you demo and example for implement.In this post, we will learn about Html Code For Online Shopping Website with an example.

Free Live Chat for Any Issue

<div style="width: 100%;">
   <div style="float:left; width: 80%">
   <div style="float:right;">
<div style="clear:both"></div>

Split page vertically using CSS


<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap split screen</title>
* {
  box-sizing: border-box;

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;

<h2>Two Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#3d3d3d;">
    <h2>Tamil Rockers 1</h2>
    <p>Tamilrockers is a torrent website that is immensely popular among south Indian movie fans...</p>
  <div class="column" style="background-color:#c60000;">
    <h2>Tamil Rockers 2</h2>
    <p> is a torrent website which provides illegal download and streaming of content such as Tamil, Telugu, Malayalam and Bollywood movies and ...</p>


I hope you get an idea about How TO – Two Column Layout?.
I would like to have feedback on my blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.

1/5 - (2 votes)