85 views
How to Divide Html Page Into Two Parts Vertically And Horizontally
To divide an HTML page into two parts vertically and horizontally, you can use CSS along with HTML. Here are two approaches you can follow:
- Using CSS Flexbox:
To divide the page vertically:
HTML
<style>
.container {
display: flex;
height: 100vh; /* Set the container height to full viewport height */
}
.left-side, .right-side {
flex: 1; /* Both sides will take equal space */
}
</style>
<div class="container">
<div class="left-side">
<!-- Content for the left side -->
</div>
<div class="right-side">
<!-- Content for the right side -->
</div>
</div>To divide the page horizontally:
HTML
<style>
.container {
display: flex;
width: 100%; /* Set the container width to full width */
}
.top-section, .bottom-section {
flex: 1; /* Both sections will take equal space */
}
</style>
<div class="container">
<div class="top-section">
<!-- Content for the top section -->
</div>
<div class="bottom-section">
<!-- Content for the bottom section -->
</div>
</div>- Using CSS Grid:
To divide the page vertically:
HTML
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* Two equal columns */
height: 100vh; /* Set the container height to full viewport height */
}
</style>
<div class="container">
<div class="left-side">
<!-- Content for the left side -->
</div>
<div class="right-side">
<!-- Content for the right side -->
</div>
</div>To divide the page horizontally:
HTML
<style>
.container {
display: grid;
grid-template-rows: 1fr 1fr; /* Two equal rows */
height: 100vh; /* Set the container height to full viewport height */
}
</style>
<div class="container">
<div class="top-section">
<!-- Content for the top section -->
</div>
<div class="bottom-section">
<!-- Content for the bottom section -->
</div>
</div>These are basic examples that demonstrate how to divide the page into two parts vertically and horizontally using CSS. You can further customize the styles and adjust the dimensions as per your requirements.