How to divide a page equally into left and right in css?

With CSS, you can create grids:

Here is a little example:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
  grid-template-columns: auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div> 
</div>

Here is some documentation from w3schools. Hope this helps: https://www.w3schools.com/css/css_grid.asp

You can use flex for page layout:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
}

img {
  width: 100%;
}

.left,
.right {
  padding: 20px;
  width: 50%;
  border: solid;
}

.content {
  width: 80%;
  margin: 40px auto;
}

.title {
  text-align: center;
}

@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .left,
  .right {
    width: 100%;
  }
  .content {
    width: 100%;
  }
}

<div class="title">
  <h1>Title</h1>
</div>
<div class="container">
  <div class="left">
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg">
    <div class="content">This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.This is left div.</div>
  </div>
  <div class="right">
    <div class="content">This is right div.This is right div.This is right div.This is right div.This is right div.This is right div.This is right div.This is right div.This is right div.This is right div.This is right div.</div>
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg">
  </div>
</div>

How to divide a page equally into left and right in css?

Related

Recent Posts