CSS Create Responsive Side by Side div design

user_19826848 0
Viewed 38

I am trying to create a website where I have divs side by side in a list (separated by a vertical line). I am referencing this design

I am having trouble making the design responsive: I tried using % but when resizing the browser, the divs containing my text content move down and awkwardly collide/crash into each other (and don't stay separated by the vertical line). I am wondering if anyone knows how to keep the divs separated and responsive when resizing

#experience {
  border: 1px solid red;
  padding-top: 0px;
  margin-top: 0px;
  min-height: 1000px;
}

.center_text {
  border: 1px solid black;
  padding-top: 1%;
  text-align: center;
  color: #001418;
  font-weight: 600;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 2em;
}

.vline {
  height: 740px;
  width: 1px;
  border: none;
  border-right: solid 1px black;
  z-index: 10;
}

.circle2 {
  border: 50px solid black;
  width: 1px;
  border: none;
  border-right: solid 1px black;
  z-index: 10;
}

#exp1 {
  border: 1px solid blue;
  font-family: 'Josefin Sans', sans-serif;
  color: #182153;
  margin-top: -43%;
  height: 150px;
}

.circle:before {
  content: ' \25CF';
  font-size: 20px;
  margin-left: 49.69%;
}

.exp_text {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 0 auto;
  border: 1px solid red;
  margin-top: -2%;
  min-height: 110px;
}

.left_exp {
  border: 1px solid green;
  text-align: right;
  margin-left: 25%;
}

.right_exp {
  margin-top: -5.8%;
  border: 1px solid green;
  width: min-content;
  margin-left: 60%;
}

.date {
  font-size: 1.3em;
  font-weight: 600;
}

.company {
  font-size: 1.3em;
  font-weight: 600;
}

.role {
  font-size: 1em;
  min-width: 250px;
}

.job_descr {
  font-size: 1em;
  min-width: 250px;
}
<div id="experience">

  <h3 class="center_text"> Experience</h3>

  <div>

    <hr class="vline" />


    <div id="exp1">
      <span class="circle"></span>

      <div class="exp_text">
        <div class="left_exp">
          <div class="date">
            <p>2022 </p>
          </div>
          <div class="role">
            <p>Software Engineering Intern</p>
          </div>
        </div>


        <div class="right_exp">
          <div class="company">
            <p>Company Name</p>
          </div>
          <div class="job_descr">
            <p>Description.................</p>
          </div>
        </div>


      </div>
    </div>


  </div>

</div>

responsive-design frontend css html
1 Answers

The solution was to use flexbox.

#experience_content {
    margin: 0 auto;
    min-height: 100vh;
    width: min-content;
}

.row {
    display: flex;
}

.column {
    color: black;
    flex:33.3%;
    padding: 20px;
}

and

<div id="experience">

        <div id="experience_content">
            <div class="row">
                <div class="column">
            </div>
        </div>
    </div>
</div>
user_198268480
Related