Html Question posted in
Some basic documentation can be found here.

Html – How can i make my <div> elements inline side by side

I’m struggling a bit to figure this out. I have 3 elements in a flexbox section with the flex direction on the section set to column.

So far my code centersmy h2 element at the top of the section and the 3 elements in a centered column below each other as the flex-direction tells it to be. See attached screenshot.

.projects {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
  }
.projects div {                               /* projects placeholder */
  background-color : var(--secondary-color);
  border-radius    : 20px;
  width            : 360px;
  height           : 480px;
  margin           : 15px;
  color            : var(--primary-color);
  }
<section class="projects" id="projects">
  <h2>Projects</h2>
  <div class="proj1">
    <p>Placeholder</p>
  </div>
  <div class="proj2">
    <p>Placeholder</p>
  </div>
  <div class="proj3">
    <p>Placeholder</p>
  </div>
</section>

What would i need to do to put my 3 elements side by side by side under the h2?

Tags:

2

Answers


  1. 0

    I believe you should wrap those three elements in a container of their own (flexbox should work).

    Something like

    <section class="projects" id="projects">
    <h2>Projects</h2>
    <div class="projectsContainer">
        <div class="proj1"><p>Placeholder</p></div>
        <div class="proj2"><p>Placeholder</p></div>
        <div class="proj3"><p>Placeholder</p></div>
    </div>
</section>

    And then add a class for projectsContainer to your CSS file that displays the list horizontally.

    Login or Signup to reply.
  2. 0

    Wrap them in another div and display flex

    <section class="projects" id="projects">
        <h2>Projects</h2>
        <div class="container-project">
           <div class="proj1"><p>Placeholder</p></div>
           <div class="proj2"><p>Placeholder</p></div>
           <div class="proj3"><p>Placeholder</p></div>
       </div>
    </section>


    
.projects {
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;

}

/* projects placeholder */
.projects div {
    background-color: var(--secondary-color);
    border-radius: 20px;
    width: 360px;
    height: 480px;
    margin: 15px;
    color: var(--primary-color);
}

.container-project {
    display: flex;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search