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.

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


Split page vertically using CSS

index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap split screen</title>
<style>
* {
  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;
}
</style>
</head>
<body>

<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>
  <div class="column" style="background-color:#c60000;">
    <h2>Tamil Rockers 2</h2>
    <p>Tamilrockers.com is a torrent website which provides illegal download and streaming of content such as Tamil, Telugu, Malayalam and Bollywood movies and ...</p>
  </div>
</div>

</body>
</html>

I hope you get an idea about How TO – Two Column Layout?.
I would like to have feedback on my infinityknow.com 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.