Tips for ensuring smaller columns have the same height as their siblings

I'm facing an issue where I have a row with two columns dictating the height, but one of them is shorter than the others. How can I make the shorter column stretch to match the height of the row?

This inconsistency in height is causing disruption to my layout.

Below is the HTML and CSS code for reference:

.customDiv {
  background-color: white;
  text-align: center;
  border: 1px solid red;
}

body {
  background-color: black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<body>
  <div class="container">
    <div class="row">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmkCF_wgI5tCnplsBhDh23wy7psxUHLwiF2sVfxyPAswOcLfI8hQ" alt="" class="col-sm-3 col-sm-offset-4 img-circle">
    </div>

    <div class="row">
      <div class="col-sm-3 customDiv">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmkCF_wgI5tCnplsBhDh23wy7psxUHLwiF2sVfxyPAswOcLfI8hQ" alt="">
      </div>

      <div class="col-sm-3 customDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A officiis accusamus est eaque voluptates! Aspernatur commodi natus iure ipsum, libero laudantium sequi praesentium beatae quia alias laboriosam dolor quos accusamus!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam iste, excepturi. Asperiores ad quaerat, autem, in hic laudantium ea, consequatur dolorum totam rem maiores architecto. Ipsa assumenda quis nisi consequuntur.</p>
      </div>
      <div class="col-sm-3 customDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione magni totam natus rem molestiae doloribus, at ipsa voluptatibus quam adipisci consectetur non voluptatum ullam id possimus maiores voluptates, esse assumenda.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates soluta nesciunt dolorem perferendis officiis pariatur magni eum illo fugit laudantium officia, sapiente blanditiis adipisci. Similique corporis nisi officiis soluta quod!</p>
      </div>
    </div>
  </div>

</body>
css

Answer №1

If you want to easily arrange elements, a bit of flexbox is all you need: https://jsfiddle.net/6jjk3s9q/

Simply add display-flex flex-wrap-wrap (both classes - utilities) to the row.

.display-flex {
    display: flex;
}

.flex-wrap-wrap {
    flex-wrap: wrap;
}

Answer №2

Apply the following CSS to your parent column:

  display: flex;

This will ensure that its children automatically take up the full height of the container.

.customDiv {
  background-color: white;
  text-align: center;
  border: 1px solid red;
}

img{
display:block;
margin:0 auto;
}

body {
  background-color: black;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<body>
  <div class="container">
    <div class="row">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmkCF_wgI5tCnplsBhDh23wy7psxUHLwiF2sVfxyPAswOcLfI8hQ" alt="" class="col-sm-3 col-sm-offset-4 img-circle">
    </div>

    <div class="row flex">
      <div class="col-sm-3 customDiv">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmkCF_wgI5tCnplsBhDh23wy7psxUHLwiF2sVfxyPAswOcLfI8hQ" alt="">
      </div>

      <div class="col-sm-3 customDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A officiis accusamus est eaque voluptates! Aspernatur commodi natus iure ipsum, libero laudantium sequi praesentium beatae quia alias laboriosam dolor quos accusamus!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam iste, excepturi. Asperiores ad quaerat, autem, in hic laudantium ea, consequatur dolorum totam rem maiores architecto. Ipsa assumenda quis nisi consequuntur.</p>
      </div>
      <div class="col-sm-3 customDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione magni totam natus rem molestiae doloribus, at ipsa voluptatibus quam adipisci consectetur non voluptatum ullam id possimus maiores voluptates, esse assumenda.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates soluta nesciunt dolorem perferendis officiis pariatur magni eum illo fugit laudantium officia, sapiente blanditiis adipisci. Similique corporis nisi officiis soluta quod!</p>
      </div>
    </div>
  </div>

</body>

Answer №3

New Approach with CSS Tables

Instead of using Flexbox, consider applying display:table to the parent element and display:table-cell to its children for a different layout solution.

.customDiv {
  background: lightgrey;
  width: 33.3%;
  border: 1px solid blue;
  display: table-cell;
  text-align: center;
  padding: 5px;
  vertical-align: top;
}

.table {
  display: table;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-3  col-xs-offset-4 img-circle">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmkCF_wgI5tCnplsBhDh23wy7psxUHLwiF2sVfxyPAswOcLfI8hQ" alt=""></div>
    </div>

    <div class="table">
      <div class="customDiv">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmkCF_wgI5tCnplsBhDh23wy7psxUHLwiF2sVfxyPAswOcLfI8hQ" alt="" class="img-responsive">
      </div>
      <div class="customDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A officiis accusamus est eaque voluptates! Aspernatur commodi natus iure ipsum, libero laudantium sequi praesentium beatae quia alias laboriosam dolor quos accusamus!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam iste, excepturi. Asperiores ad quaerat, autem, in hic laudantium ea, consequatur dolorum totam rem maiores architecto. Ipsa assumenda quis nisi consequuntur.</p>
      </div>
      <div class="customDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione magni totam natus rem molestiae doloribus, at ipsa voluptatibus quam adipisci consectetur non voluptatum ullam id possimus maiores voluptates, esse assumenda.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates soluta nesciunt dolorem perferendis officiis pariatur magni eum illo fugit laudantium officia, sapiente blanditiis adipisci. Similique corporis nisi officiis soluta quod!</p>
      </div>
    </div>
  </div>

</body>

Suggested Implementation Using Flexbox

Consider utilizing Flexbox by setting display:flex on the parent element to achieve the desired layout smoothly without complications.

.customDiv {
  background-color: white;
  text-align: center;
  border: 1px solid red;
  width: 100%;
}

body {
  background-color: black;
}

.flex-me {
  display: flex;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-3 col-xs-offset-4 img-circle">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmkCF_wgI5tCnplsBhDh23wy7psxUHLwiF2sVfxyPAswOcLfI8hQ" alt=""></div>
    </div>

    <div class="row flex-me">
      <div class="col-xs-4 customDiv">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmkCF_wgI5tCnplsBhDh23wy7psxUHLwiF2sVfxyPAswOcLfI8hQ" alt="" class="img-responsive">
      </div>

      <div class="col-xs-4 customDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A officiis accusamus est eaque voluptates! Aspernatur commodi natus iure ipsum, libero laudantium sequi praesentium beatae quia alias laboriosam dolor quos accusamus!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam iste, excepturi. Asperiores ad quaerat, autem, in hic laudantium ea, consequatur dolorum totam rem maiores architecto. Ipsa assumenda quis nisi consequuntur.</p>
      </div>
      <div class="col-xs-4 customDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione magni totam natus rem molestiae doloribus, at ipsa voluptatibus quam adipisci consectetur non voluptatum ullam id possimus maiores voluptates, esse assumenda.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates soluta nesciunt dolorem perferendis officiis pariatur magni eum illo fugit laudantium officia, sapiente blanditiis adipisci. Similique corporis nisi officiis soluta quod!</p>
      </div>
    </div>
  </div>

</body>

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

Enhancing dynamic text boxes with jQuery by incorporating additional information

I've recently developed an interactive app that dynamically creates tables based on user input. The app includes a feature where you can specify the number of tables to generate and track the total count of tables added. Currently, I'm exploring ...

jqueryhtmlcss

Adjust the dimensions of the react-dropdown-tree-select element to better fit your needs

Hey there, I'm a beginner web developer currently working on a tree-based dropdown menu. Check out the documentation here To see it live in action, visit the example here I'm trying to adjust the height and width of the "Search/DropDown bar" in ...

cssreactjsreact-dropdown-tree-select

How to enhance the animation of the Material-UI right side persistent drawer

I am currently working on a sophisticated application that includes several drawers. Specifically, I am encountering an issue with the animations of the right side drawer. While the drawers animate correctly, the parent divs do not seem to follow suit. Eve ...

cssreactjsmaterial-uijss

Spinning an SVG circle using a group element

I'm interested in rotating an SVG circle without affecting the rotation of other elements. My attempt to rotate the white circle using rotateZ(15deg) resulted in this: This is the progress I've made so far: https://jsfiddle.net/41hrnojs/ <sv ...

csssvg

Is it acceptable to debut a full-screen iframe widget compared to an embedded one?

My current project involves integrating a custom widget into users' websites for my application. I am considering using an iframe as it seems to be the most efficient option for several reasons: Utilizing the custom framework of the application will ...

javascripthtmlcssiframecross-domain

Transforming the style of a particular element within React using Array().fill().map's method

Looking for a way to dynamically change the color of an array in React + styled jsx? Let's say you want to change the color when the number of elements in the array is a multiple of 4 (e.g. the index is 4, 8, etc.) Is there a clever solution to achi ...

cssreactjs

When the sidebar is set to position: fixed, the icons magically vanish

This CSS is specifically for the side navigation bar. .side-nav { // position: sticky; top: 0; left: 0; height: 100vh; z-index: 100; width: calc(3.5vw + 3.5vh); // position: fixed; &.content { height: 100%; display: flex; fl ...

csssass

Prevent unnecessary image resizing during parallax scrolling animation

Check out my demonstration where the image scaling results in the margin-top of the parallax wrapper being unable to dynamically adjust. Demonstration: http://jsfiddle.net/KsdeX/12/ .wrapper-parallax { margin-top: 150px; margin-bottom: 60px; } W ...

javascripthtmlcssparallax

Why does the Material button style take time to apply when my Angular application first loads instead of being immediate?

Inside the Angular application I'm working on, there is a toolbar component that consists of three different links. The first link directs to the main app page, while the other two lead to distinct components within the app. Each link is styled with c ...

cssangularangular-material

When the screen size decreases, display the title on two lines

Currently, I am in the process of developing a react web application with the assistance of redux. My main objective is to ensure that the page is highly responsive. At this point, there is a title positioned at the top displaying: Actions to do: Past due ...

htmlcssreactjs

How can I switch between different images using jQuery?

HTML <div class="image_rollover"> <img id="image_one" src=image_one.png"> <img id="image_two" src="image_two.png"> <img id="image_three" src="image_three.png"> <img id="image_four" src="image_four.png"> ...

javascriptjquerycss

What is the best way to create a layout with two images positioned in the center?

Is it possible to align the two pictures to the center of the page horizontally using only HTML and CSS? I've tried using this code but it doesn't seem to work: #product .container { display: flex; justify-content: space-between; flex-w ...

javascripthtmlcssfrontend

A guide on implementing a Material UI table to display one row at a time on each page

I'm currently working on incorporating a Material UI table to showcase content with just one row per page. After successfully loading the page and displaying the first row, I encountered an issue where navigating to subsequent pages does not render a ...

cssmaterial-ui

Guide on how to append input field data to a table using jQuery

My current project involves working with a table, and I have encountered some challenges along the way. Typically, I have 4 input fields where I can input data that is then sent to the table in my view. However, if I exceed 4 values and need to add more, I ...

javascriptjqueryhtmlcss

Navigation Menu Dropdown Present on the Right Side and Arranged in a Horizontal Stack

I'm having trouble with a dropdown menu in my navigation bar. I followed the example on W3Schools but when I hover, the menu appears horizontally instead of vertically and to the far right of the page. I've searched for solutions but can't s ...

htmlcssnav

text breaks free from the flex container when zooming in

Hi, I am attempting to design a user card-type div that includes images on the left and the username on the right. I have managed to create the layout, but when zooming in, the text is overflowing and escaping the flex container. Here is my code snippet. Y ...

htmlcssflexbox

jQuery counter no longer updates when scrolling

I'm having trouble with my jQuery counting function when using the scroll feature on a specific div ID. The numbers freeze if I keep scrolling before they finish updating on the screen. Whenever I scroll to the defined div ID, the counting function k ...

javascripthtmljquerycss

JavaScript function to toggle visibility and scroll back to top of the page

I have been an avid reader on this platform, and I am hoping that my question has not already been addressed. I am struggling to find a solution to a problem I am facing. There are two DIVs in my code that I toggle between showing and hiding using Javascr ...

javascriptjqueryhtmlcssshow

Getting the x-axis points on Google charts to start at the far left point

I have integrated the Google API for charts into my application and am using multiple charts on the same page. However, I am facing an issue with setting padding for the charts. When I include more data points, the chart area occupies more space in the div ...

javascriptcsschartsgoogle-visualizationpadding

CSS animation - gradual disappearance on mouse exit

Hey everyone, I'm in need of some assistance with my animation. I've created a button that moves right and left in a loop, but I'm encountering an issue when the mouse moves away from the button. The transition is not smooth and it jumps bac ...

htmlcssloopsanimationtransform