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

Html – Can't align things the way I want

Currently trying to create something kind of like a about me page, I’m currently having some issues aligning things properly.

My current issue is, neither of the bottom boxes as shown in the pic don’t seem to align the way I want.

What I'm trying to achieve is the box on the left is exactly the same position as the box on the right but instead the one on the left is slightly below the one on the right
Here is a visual example of what I am trying to achieve.

I honestly don’t know what to do which is why I am asking here.

.top {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 30px;

}

#nick {
  border: 4px double;
  border-radius: 10px;
  padding: 10px 10px;
  width: 63%;
  background-color: rgba(0, 0, 0,0.7);
  color: gold;
  border-color: #B2B2F9;
}

.huge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  margin-top: 40px;
  gap: 40PX;
}

.leleft {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ni {
  border: 4px double ;
  border-radius: 10px;
  padding: 5px 5px;
  width: 200px;
  text-align: center;
  background-color: rgba(0, 0, 0,0.7);
  color: #B2B2F9;
  border-color: white;
}

.leright {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 850px;
}

.purpose {
  border: 4px double;
  border-radius: 10px;
  padding: 5px 5px;
  background-color: rgba(0, 0, 0,0.7);
  color: #B2B2F9;
  border-color: white;
  align-self:flex-start;
}
<div class="top">
    <h1 id="nick">sdasd</h1>
</div>
<div class="huge">
    <div class="leleft">
        <div class="ni">
        <h2>es</h2>
        <hr>
        <hr>
        esss
        </div>
    </div>
    <div class="leright">
    <div class="purpose">
    <h2>asdasd</h2>
    <HR>
    <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam eum assumenda neque deserunt atque. Sunt dolore et magnam numquam, error at sit laudantium fugiat consequuntur cum. Veniam tenetur error vel!</div>
    </div>
</div>
</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam eum assumenda neque deserunt atque. Sunt dolore et magnam numquam, error at sit laudantium fugiat consequuntur cum. Veniam tenetur error vel!</div>
Tags:

2

Answers


  1. 0

    Remove align-items: center; from huge to start.

    Then apply flex:1 to .ni to make it expand to the full height

    .top {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 30px;
}

#nick {
  border: 4px double;
  border-radius: 10px;
  padding: 10px 10px;
  width: 63%;
  background-color: rgba(0, 0, 0, 0.7);
  color: gold;
  border-color: #B2B2F9;
}

.huge {
  display: flex;
  /*align-items: center;*/
  justify-content: center;
  flex-direction: row;
  margin-top: 40px;
  gap: 40PX;
}

.leleft {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ni {
  border: 4px double;
  border-radius: 10px;
  padding: 5px 5px;
  width: 200px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
  color: #B2B2F9;
  border-color: white;
  flex: 1;
}

.leright {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 850px;
}

.purpose {
  border: 4px double;
  border-radius: 10px;
  padding: 5px 5px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #B2B2F9;
  border-color: white;
  align-self: flex-start;
}
    <div class="top">
  <h1 id="nick">sdasd</h1>
</div>
<div class="huge">
  <div class="leleft">
    <div class="ni">
      <h2>es</h2>
      <hr>
      <hr> esss
    </div>
  </div>
  <div class="leright">
    <div class="purpose">
      <h2>asdasd</h2>
      <HR>
      <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam eum assumenda neque deserunt atque. Sunt dolore et magnam numquam, error at sit laudantium fugiat consequuntur cum. Veniam tenetur error vel!</div>
  </div>
</div>
</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam eum assumenda neque deserunt atque. Sunt dolore et magnam numquam, error at sit laudantium fugiat consequuntur cum. Veniam tenetur error vel!</div>
    Login or Signup to reply.
  2. 0 
    .top {
   display: flex;
   justify-content: center;
   text-align: center;
   margin-top: 30px;
}

#nick {
   border: 4px double;
   border-radius: 10px;
   padding: 10px 10px;
   width: 63%;
   background-color: rgba(0, 0, 0, 0.7);
   color: gold;
   border-color: #B2B2F9;
}

.huge {
   display: flex;
   justify-content: center;
   gap: 40px;
   margin-top: 40px;
}

.leleft,
.leright {
   width: 50%; /* both item will get half of the container size */
   display: flex;
   flex-direction: column;
}

.ni,
.purpose {
   border: 4px double;
   border-radius: 10px;
   padding: 5px 5px;
   text-align: center;
   background-color: rgba(0, 0, 0, 0.7);
   color: #B2B2F9;
   border-color: white;
   flex-grow: 1;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search