In this article we will show you the solution of two column layout HTML, HTML columns can be made in a variety of ways; despite what it may sound like, you must use both HTML and CSS.
For a long time,the only way to add columns was by hand-declaring them in the page's CSS styles and specifying static item sizes.
This strategy was successful, but it merely created the illusion of columns.
Building columned layouts is now a lot more accessible and has considerably more assistance than it did back then thanks to the growth of CSS.
Also, there are numerous approaches to designing column layouts for websites.
As of the time this article was written, CSS3 allowed for the creation of column layouts using grids and tables, and it even included a column property.
As only one CSS selector needs its width and margin defined, it is simple to create a two-column layout in HTML.
The tools that CSS provides for more easily and neatly formatting web pages have improved as a result of the extensive growth and development that it has undergone over the years.
More than merely freedom is offered by these modifications. Moreover, they provide increased simplicity and promote the widely used DRY programming methodology.
In the condition that CSS is now in, some methods of creating columns are discouraged.
Columns were once frequently created using CSS tables, but this method has subsequently become less widespread.
Step By Step Guide On Two Column Layout HTML :-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial;
color: white;
}
.left, .right {
height: 50%;
width: 50%;
position: fixed;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: rgb(36, 0, 95);
}
.right {
right: 0;
background-color: rgb(56, 1, 44);
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1 style="color: black;">Two column layout grid example</h1>
<div class="left">
<h1>Some random text on the left</h1>
</div>
<div class="right">
<h1>Some random text on the right</h1>
</div>
</body>
</html>
- The browser is informed of the HTML version we are using in our first line, which is <HTML>. Tags are the foundation of HTML documents.
- The style property is used for the color in the following step. Under style we create background color, width, height, padding.
- Next comes the body tag, which defines the body of the webpage. You can create this same content for your site in one specific location.
- Then we create a grid using a style color function. Under the grid we define text for left and right.
Conclusion :-
The row where all of the columns would be added is initialized using the div class="row"> tag.
Div with class "column" tag is used to add the appropriate quantity of columns.
The column is coloured using the style="background-color:#aaa;" attribute.
Specific characteristics are applied to the columns within the style sheet for that specific div, such as width: 50%;.
I hope this article on two column layout HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
