Vertical alignment of divs in a single column will not be consistent

I need assistance with my website's "team" section. I am trying to ensure that the member_body divs within the same column as the member img and member header can be adjusted in width. However, they are not aligning vertically or maintaining the same width. Can you help me troubleshoot this issue?

.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>

`

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

It appears that you are currently utilizing 3 columns (col-md-6 + col-md-5 + col-md-1). I recommend simplifying this layout by using just 2 columns (col-md-6 + col-md-6)

UPDATE

  • To ensure the member_body matches the image's width and remains centered, consider adding margin:auto.

  • For the img element in your CSS, remove max-width:250px and instead include class="img-responsive".

Notes

  • I've added a demo with col-xs-*
  • Please correct "</br>" to either <br> or <br /> as it is invalid.

.member {
  padding: 30px;
  text-align: center;
  position: relative;
}
.member img {
  margin: 20px auto 0;
}
.member h3 {
  margin: 30px 0px;
}
.member_body {
  border: 1px solid red;
  max-width: 250px;
  overflow: hidden;
  height: 200px;
  margin:auto
}
.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 class="img-responsive" src="//lorempixel.com/250/200" 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 class="img-responsive" src="//lorempixel.com/250/200" 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>

Answer №2

To vertically stack the elements, utilize several <div class="column">

Therefore, assign each team to a separate <div class="column">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using AJAX to showcase data from a table in a database using the <select> tag but with an unfinished submit process

I am encountering an issue with my code. When I submit the value in getinv.php, it only returns a partial value. For example, when I click '2016-08-27', it only retrieves '2016'... My question is, how can I ensure that the exact value ...

javascriptphpjqueryhtmlajax

Not implementing auto-scroll feature because of the presence of `position: sticky` or `position: fixed` CSS properties

I'm encountering a console warning while working on my Nextjs project. Here is the snippet of my code: <aside className={`site-off desktop-hide ${showMenu ? "show-menu" : ""}`}> .... </aside> And here is the relevant ...

cssnext.js

Prevent scrolling while popup is open

I found a helpful tutorial online for creating a jQuery popup (). However, due to my limited understanding of jQuery, I'm having trouble getting it to meet my needs. The issues I'm facing are: I need to prevent the webpage from scrolling when ...

javascriptjqueryhtmlcss

Can you guide me on how to programmatically set an option in an Angular 5 Material Select dropdown (mat-select) using typescript code?

I am currently working on implementing an Angular 5 Material Data Table with two filter options. One filter is a text input, while the other is a dropdown selection to filter based on a specific field value. The dropdown is implemented using a "mat-select" ...

javascripthtmlangulartypescript

Increase the visibility of a div using Jquery and decrease its visibility with the "

Can anyone assist me with implementing a "show more" and "show less" feature for a specific div? I have put together a DEMO on codepen.io In the DEMO, there are 8 red-framed div elements. I am looking to display a "show more" link if the total number of ...

javascriptjquerycss

A guide on personalizing HTML for Django forms

I have implemented an HTML template on my website and need to capture information for my Django backend. Specifically, I am trying to extract the email address from this section of code: <input type="text" placeholder="Email" value="" style="height: 30 ...

javascriptjqueryhtmlcssdjango

The final section of this code is failing to process PHP forms

My current project involves developing a form in PHP that fetches values from a database. The first code block, which checks for the existence of a value using if (!isset($_POST['nieuweBest'])), is functioning correctly. The second code blo ...

phphtmlmysql

Analyzing the current time against a user-inputted time using Javascript

Looking at this html and javascript code, the goal is to compare an input time with the current time. If the input time is less than 2 hours, "Less time" should be displayed in the label; if it's more than 2 hours, then "sufficient time" should appear ...

javascripthtmlfunctiontimecompare

Executing a Firebase JavaScript script on a remote web server client

I have limited experience with Javascript and I am struggling to get my code to execute. I have already completed the Android java portion, but when I attempt to run the html file, nothing happens. I am unsure if there are bugs in my code or if it needs to ...

javascripthtmlfirebase

Codignator does not attach the array elements together

While building a registration form for my website, I encountered an issue with passing single element values into an array in CodeIgniter. The values are not being passed correctly, resulting in an error message about an empty alert. How can I resolve th ...

htmlcssarrays

AngularJS - Custom directive to extract a property value from an object

Currently, I am using the following for loop to retrieve the parent category: angular.forEach(queryTicketCategories, function(category) { if(category.id === $scope.ticketCategory.parentId) { $scope.parent = category; } }); I am looking fo ...

javascripthtmlangularjsangularjs-directive

Media query malfunctioning and causing issues

Project link: The media queries provided cannot be altered and must remain as they are. However, an issue has arisen where devices are selecting the styles from smaller resolutions than intended. For example, instead of picking styles from (min-width: 992 ...

ioscsswidthmedia-queries

Switch the placement of two DIV elements by their corresponding IDs

I am attempting to adjust the position of two divs using jQuery, but I seem to be a bit confused as they are already swapping positions. However, when they do swap, it results in a duplication of the field. I have tried using both insertBefore and insertA ...

javascriptphpjqueryhtmlcodeigniter

Comparing Animation Width with Background Image Size

I'm currently facing a challenge with making my animation resize automatically based on screen size, just like my background image does. The width of the animation seems to be inconsistent or doesn't stretch across the entire screen as I intended ...

htmlcss

The Facebook like button seems to be missing from the webpage

Hi everyone, I'm having trouble getting the like button code to work. I used the wizard on Facebook but the button still isn't showing up, even with a simple HTML setup like this: <!DOCTYPE html> <html> <head> </head> < ...

htmlcssfacebook

What is the best way to implement a dialog box that displays a website within it, all while keeping my SharePoint site running in the background?

For a while now, I've been working on SharePoint Online and trying to troubleshoot an issue without success. That's why I'm considering starting over with a specific section of my SP site from scratch. My current project involves creating a ...

javascripthtmliframesharepointmodal-dialog

I encountered an error in JavaScript where the function .val() is not recognized on the selected answer, throwing

I'm trying to verify if the selected answer is correct and then add +1 to my user score. However, I'm struggling with why my code isn't functioning as expected. Can someone please point out where the bug is or if there's something else ...

javascriptjqueryhtmlarraysobject

The ability to submit a conversation chat is currently

I encountered an issue when attempting to submit a chat, and I received the error message 'handlebar is not define'. I followed the code tutorial provided in this link: https://codepen.io/drehimself/pen/KdXwxR This is the screenshot of the error ...

javascriptjqueryhtmlcss

using Javascript to eliminate necessary tags from concealed tabs

My goal is to dynamically remove the required tag from fields in hidden tabs when a tab is clicked using JavaScript. The presence of the required tag on unused fields causes issues with form submission, preventing data insertion into the database. Here&apo ...

javascripthtmltabs

Combine two separate variables and insert them into a single cURL command line

I need to incorporate a random value from a variable into a cURL command. Additionally, I want the cURL command to execute a function using this random value. At the end of the function, I want to add a different value to the first one for completion and t ...

phphtmlvariablescurl