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

Despite using twitter bootstrap, the elements on my webpage are still overlapping one another

While implementing Twitter Bootstrap on my website, I encountered a problem where elements start overlapping if the window size is reduced. This issue does not look appealing, and I expected Twitter Bootstrap to ensure that my website is fully responsive a ...

htmlcsstwitter-bootstrap

Is there a way to format Persian words in a Left-to-Right direction?

When attempting to write Persian words in a left-to-right format for math formulas in a textarea using HTML and CSS, I am struggling to make it work with properties like direction:ltr;. I have tried various solutions but none have fixed the issue. I have ...

htmlcsstext-direction

Wordpress Issues with Displaying Arabic Text Correctly

The issue arises when displaying Arabic text in menus, both the top menu and main menu. The text appears distorted and unreadable, with characters like 2Ø®Ø§Ù†Ù‚Ø§Û showing up. However, in other areas of the page such as the body content, the ...

htmlcsswordpress

What is the best way to align these two divs centrally within a container set to display as inline-block?

I can't seem to get these two floated left divs centered within a container that has a height set to auto and a display of inline-block. The container has a max-width of 1600px, but when the window is stretched wider than that, it stays aligned to the ...

htmlcss

The first div should be hidden when the toggle is activated

I am currently working on a CRUD project and incorporating some Javascript/JQuery into it. I have a button labeled "Add", which, when clicked, displays a specific div element. However, I'm facing an issue where the div is already visible before the us ...

javascriptjquerycss

Tips for keeping a link in place on an image

Trying to place a link on a 1920x1080 picture and keep it fixed in one spot, regardless of browser size. Any suggestions? <!DOCTYPE html> <link rel="stylesheet" href="../style.css" /> <html> <head> ...

htmlcss

Adjust all children's height to match that of the tallest child

My nearly completed jQuery slideshow is working well except for one issue - the height of the slideshow remains fixed at the height of the first displayed slide, causing problems. View the issue here: . I have tried different jQuery solutions from StackOve ...

jqueryhtmlcss

When importing both shared-lib and MUI in my ReactJS application, I noticed that my custom MUI styles were being overwritten by the MUI styles

I have developed a shared library using React and Storybook. Within this library, I am utilizing the MUI V5 Button and making some style modifications using CSS modules. I executed the "build&pack" script in my library, which generated a tgz package that ...

cssreactjsmaterial-ui

Optimizing mobile page layouts with CSS

I'm putting in a lot of effort to ensure that my simple form page is optimized for mobile devices. Although the form is visible, I find myself having to zoom in quite a bit in order to read it. Here's an example: ...

htmlcssmobilemobile-website

Looking to subtly transition from the current webpage to the next one with a fading effect?

I'm looking to create a smooth transition between web pages on my site by slowly fading out the current page and fading in the next one when a link is clicked. $(document).ready(function() { $('body').css("display","none"); $(&a ...

javascriptjqueryhtmlcss

How can I show pagination links as buttons on a gridview in ASP.NET?

When working on asp.net web forms, I encountered an issue where I was unable to display pagination links as buttons with a gray background on the grid view control. To achieve this, I needed to assign a CSS class to the pager style on the grid view in ord ...

cssasp.netbootstrap-4gridview

Overlap between sidebar and navbar

I am currently working on developing an admin panel for one of my projects. I designed a sidebar and implemented a standard bootstrap 4 navbar. However, I encountered a minor issue where the bootstrap 4 navbar is extending to the full width of the page ins ...

htmlcssbootstrap-4

Why isn't the show/hide feature in Jquery functioning properly?

I have a div that needs to be displayed after hovering over another element. These elements are not within the same div. The popup info should appear when an icon with the class .option_36_124 is hovered over. $(".option_36_124").hover(function(){ $(& ...

javascriptjqueryhtmlcss

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

javascripthtmlcsshtml-table

Challenges with conflicting CSS styling issues

I am facing a CSS issue on my website. I am trying to add captions for images on my site. I have experimented with the jquery-capty plugin () and some custom CSS styles for framed images (). While both solutions work in my regular layout, they do not funct ...

jqueryhtmlcss

Alter the color of the " / " breadcrumb bar

Is there a way to change the color of the slash " / " in breadcrumb trails? I have tried adding CSS styles, but it doesn't seem to work. <ol class="breadcrumb" style="font-size: 20px;"> <li class="breadcrumb-item&q ...

htmlcssbootstrap-5

Creating Eye-Catching Images by Incorporating Image Overlays Using Just One Image

I'm facing a bit of a challenge here. I need to figure out how to overlay an image onto another image using just a single image tag. Specifically, I want to add a resize icon to the bottom right corner of an image to let users know they can resize it ...

javascripthtmlcss

Position elements to the right side of a flex container

I'm utilizing Bootstrap 4 along with this CSS class to vertically align my elements: .vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-i ...

htmlcsstwitter-bootstrapflexboxtwitter-bootstrap-4

What are the steps to creating a screen that mimics a mirror in the physical world?

Is there a way for the user to see themselves when they open a URL? I'm not looking for a mirror effect like the one produced by jQuery reflection js. I don't want to rely on using the front camera or any other camera to achieve this. Any sugges ...

javascriptjqueryhtmlcssmirror

What is the process for creating a Sass mixin that declares a selector at the base level, rather than nested within another

Apologies for the unconventional terminology in the query, but I am struggling to find better words to describe it. Hopefully, this example will clarify my intention: scss-syntax .my-smug-selector { @include my-smug-mixin(30px); } desired css-output ...

csssassmixins