How can i put my divs right next to each (vertically) others without overlapping?-CodePudding

My divs are overlapping here's the code of my index.html :

.titlesec {

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  margin-bottom: 50px;
  padding: 20px;
}

#moi {

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 107px 70px 0 70px;
  height: 80vh;
}

.nom h1 {
  font-family: 'Lato', sans-serif;
  font-size: 130px;
}

.intro {

  margin-top: 150px;
  width: 50%;
  align-self: flex-end;
  line-height: 35px;
  font-size: 23px;
}

    <div id="moi">
        <div >
            <h1>Maxime Miquel</h1>
        </div>
        <div  >
            <p >some text no one cares about</p>
        </div>
    </div>
    <div id="one" >
        <h1>TITLE</h1>
    </div>
    <div id="formation">
       .........
    </div>

And the result : Image in a browser

The title is overlapping the div right on top of it when i reduce the viewheight. This problem appeared when i changed the height of #moi to 80vh.

Hope someone can help me. Thank you =)

CodePudding user response：

If you mean next to eachother vertically as in under one another, you need to utilize the div id="moi" as a container for all of your info and nest all of those child divs into that container so they respect each other's margin and padding, otherwise they're just going to do their own thing.

.titlesec {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  margin-bottom: 50px;
  padding: 20px;
}

#moi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 107px 70px 0 70px;
  height: 80vh;
}

.nom h1 {
  font-family: 'Lato', sans-serif;
  font-size: 130px;
}

.intro {
  margin-top: 150px;
  width: 50%;
  align-self: flex-end;
  line-height: 35px;
  font-size: 23px;
}

<div id="moi">
  <div >
    <h1>Maxime Miquel</h1>
  </div>
  <div id="one" >
    <h1>TITLE</h1>
  </div>
  <div >
    <p>some text no one cares about</p>
  </div>

  <div id="formation">
    .........
  </div>
</div>

CodePudding user response：

You can either use the flex box containers or you can use the css grid to make two columns.

grid-area: item1, item2 item1, item2;