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

I need to equally divide the entire page to 2 parts as left and right and make the content aligned vertically in left and right sections. Means the image and the text should be end in same point and aligned in a same vertical line. How can I create a resposive layout like this? To be more specific, I need to do what has etoro.com done. This is the layout I'm gonna achieve

CodePudding user response：

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 >
  <div >1</div>
  <div >2</div>
  <div >3</div>  
  <div >4</div>
  <div >5</div>
  <div >6</div>  
  <div >7</div>
  <div >8</div> 
</div>

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

CodePudding user response：

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 >
  <h1>Title</h1>
</div>
<div >
  <div >
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg">
    <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.This is left div.</div>
  </div>
  <div >
    <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.This is right div.</div>
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg">
  </div>
</div>

CodePudding user response：

One method you might choose to implement is CSS column logic.

Using the the table and tr tags you can create rows within each column to store individual elements.

Your left and right halves of the screen you will use column divs, and internally for each item you use a tr div like so:

.container
{
    float:center;
}

.column
{
    float: left;
    width: 50%;
}

.element
{
    border: 3px solid green;
    margin: 3px 3px 3px 3px;
}

<div >
      <div >
        <h1 style="text-align:center;">Column #1</h1>
        <table>
          <tr>
            <div >
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales est et posuere dapibus.</p>
            </div>
          </tr>
          
          <tr>
            <div >
              <p>Morbi in felis sit amet quam congue bibendum. </p>
            </div>
          </tr>
          
          <tr>
             <div >
              <p>Nullam suscipit elit blandit, sagittis ligula ac, iaculis magna.</p>
            </div>
          </tr>
        </table>
      </div>
      <div >
        <h1 style="text-align:center;">Column #2</h1>
        <table>
          <tr>
            <div >
              <p>Curabitur magna lectus, scelerisque vitae velit a, auctor gravida ex.</p>
            </div>
          </tr>
          
          <tr>
            <div >
              <p>Donec erat quam, iaculis vitae orci id, aliquam pretium ante.</p>
            </div>
          </tr>
          
          <tr>
             <div >
              <p>Praesent quis libero malesuada arcu iaculis cursus.</p>
            </div>
          </tr>
        </table>
      </div>
</div>