Write a HTML code to divide browser window into two horizontal sections. Divide top section into three vertical sections
Answers
Explanation:
Use <section> tag to create the sections.
Use 2 sections to divide horizontally.
In the first section, create 3 sections, as shown in the code.
Note: Please, run the code to see the output.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
*
{
margin: 0; padding: 0;
}
html, body, #container
{
height: 100%;
}
main
{
height: 100%;
background: green;
}
.half
{
height: 50%;
background: green;
}
.ver1
{
width: 33.33%;
height: 100%;
float: left;
background-color: red;
border-collapse: collapse;
}
.ver2
{
width: 33.33%;
height: 100%;
float: left;
background-color: blue;
border-collapse: collapse;
}
.ver3
{
width: 33.33%;
height: 100%;
position: relative;
float: right;
background-color: yellow;
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="container">
<main>
<section class="half">
<section class = "ver1"></section>
<section class = "ver2"></section>
<section class = "ver3"></section>
</section>
<section class="half"></section>
</main>
</div>
</body>
</html>
#answerwithquality
#BAL