László Vaszi László Vaszi - 6 months ago 14
HTML Question

Divs in the same column won't align vertically

I'm building a "team" section for my website, where the

member_body
divs contained by the same column as the member
img
and member header above slip aside if I want to define their width. What can be the problem in this cases? I want them to vertically align and have the same width.



.member {
padding: 30px;
text-align: center;
position: relative;
}
.member img {
max-width: 250px;
margin: 20px auto 0px auto;
}
.member h3 {
margin: 30px 0px;
}
.member_body {
border: 1px solid red;
max-width: 250px;
overflow: hidden;
height: 200px;
}
.member_body span {
margin-top: 20px;
font-size: 30px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="team">
<h1>Our Team</h1>
<div class="separator2"></div>
<div class="container-fluid">
<div class="row">
<div class=" col-md-6">
<div class="member">
<h3>Member One</h3>
<img src="photos/team-member-1.jpg" alt="Team Member 1">
<div class="member_body">
<h5>Position</h5>
<div class="separator"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</br>Voluptates praesentium nulla cupiditate!</p>
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
</div>
</div>
</div>
<div class=" col-md-5">
<div class="member">
<h3>Member 2</h3>
<img src="photos/team-member-2.jpg" alt="Team Member 2">
<div class="member_body">
<h5>Position</h5>
<div class="separator"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</br>Voluptates praesentium nulla cupiditate!</p>
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>





`

Answer

you are using 3 columns ( col-md-6+ col-md-5 + col-md-1), just use 2 (col-md-6 + col-md-6)

Notes

  • added col-xs-* for demo
  • your </br> is invalid, should be <br> or <br />

.member {
  padding: 30px;
  text-align: center;
  position: relative;
}
.member img {
  max-width: 250px;
  margin: 20px auto 0px auto;
}
.member h3 {
  margin: 30px 0px;
}
.member_body {
  border: 1px solid red;
  max-width: 250px;
  overflow: hidden;
  height: 200px;
}
.member_body span {
  margin-top: 20px;
  font-size: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="team">
  <h1>Our Team</h1>
  <div class="separator2"></div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6 col-md-6">
        <div class="member">
          <h3>Member One</h3>
          <img src="photos/team-member-1.jpg" alt="Team Member 1">
          <div class="member_body">
            <h5>Position</h5>
            <div class="separator"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              <br />Voluptates praesentium nulla cupiditate!</p>
            <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-md-6">
        <div class="member">
          <h3>Member 2</h3>
          <img src="photos/team-member-2.jpg" alt="Team Member 2">
          <div class="member_body">
            <h5>Position</h5>
            <div class="separator"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates
              <br />praesentium nulla cupiditate!</p>
            <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>