How can I ensure that two adjacent divs maintain the same height for their content when resizing using CSS Bootstrap?

Question

How can I ensure that two adjacent divs maintain the same height for their content when resizing using CSS Bootstrap?

I have encountered an issue with a vertical slider that I've been developing. The problem arises when there is a change in the display resolution, causing the thumbnails on the right to have a different height than the image on the left. To better understand the issue, I have created a codepen which can be found here:

https://codepen.io/fmalmeida/pen/ZOOagX

.container2 {
  background-color: grey;
}
.container1 {
  background-color: magenta;
  position: absolute;
  max-height: 609px;
  overflow: hidden;
}
.lSection {
  background-color: blue;
  position: relative;
  max-height: 609px;
}
.rSection {
  background-color: green;
  position: relative;
  max-height: 609px;
}
.lSection>* {
  min-width: 100%;
}
.rSection>ul {
  max-height: 609px;
}
.rSection>ul img {
  max-height: 150px;
}
li {
  padding-bottom: 2px;
  list-style: none;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="container2 row-fluid">
  <div class="container1 span10">
    <div class="lSection span9">
      <img class="contain" src="http://mw2.google.com/mw-panoramio/photos/medium/58122377.jpg">
    </div>
    <div class="rSection span3">
      <ul>
        <li>
          <a>
            <img src="http://cdn.olhares.pt/client/files/foto/big/330/3301699.jpg">
          </a>
        </li>
        <li>
          <a>
            <img src="http://cdn.olhares.pt/client/files/foto/big/330/3301699.jpg">
          </a>
        </li>
        <li>
          <a>
            <img src="http://cdn.olhares.pt/client/files/foto/big/330/3301699.jpg">
          </a>
        </li>
        <li>
          <a>
            <img src="http://cdn.olhares.pt/client/files/foto/big/330/3301699.jpg">
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

One way to test this issue is by resizing the browser window. At higher resolutions, the layout seems fine due to the defined maximum height. However, upon resizing the window to lower resolutions, the problem becomes apparent.

If anyone has any suggestions on how to resize both the main image and thumbnails simultaneously while maintaining the same height, it would be greatly appreciated.

Thank you.

css twitter-bootstrap

Answer 1

Answer №1

The reason for this behavior is attributed to the utilization of Bootstrap version 2.

If you take a moment to examine the illustrations they offer, you will notice that this is an expected outcome. Resize their webpage and observe how the containers designated as span1-span11 expand to full width.

My suggestion in this scenario would be to either upgrade to a newer version of Bootstrap or craft your individual implementation tailored for mobile sites.

Below is the layout table:

<table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Label</th>
                <th>Layout width</th>
                <th>Column width</th>
                <th>Gutter width</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Large display</td>
                <td>1200px and up</td>
                <td>70px</td>
                <td>30px</td>
              </tr>
              <tr>
                <td>Default</td>
                <td>980px and up</td>
                <td>60px</td>
                <td>20px</td>
              </tr>
              <tr>
                <td>Portrait tablets</td>
                <td>768px and above</td>
                <td>42px</td>
                <td>20px</td>
              </tr>
              <tr>
                <td>Phones to tablets</td>
                <td>767px and below</td>
                <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
              </tr>
              <tr>
                <td>Phones</td>
                <td>480px and below</td>
                <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
              </tr>
            </tbody>
          </table>

Answer 2

The reason for this behavior is attributed to the utilization of Bootstrap version 2.

If you take a moment to examine the illustrations they offer, you will notice that this is an expected outcome. Resize their webpage and observe how the containers designated as span1-span11 expand to full width.

My suggestion in this scenario would be to either upgrade to a newer version of Bootstrap or craft your individual implementation tailored for mobile sites.

Below is the layout table:

<table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Label</th>
                <th>Layout width</th>
                <th>Column width</th>
                <th>Gutter width</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Large display</td>
                <td>1200px and up</td>
                <td>70px</td>
                <td>30px</td>
              </tr>
              <tr>
                <td>Default</td>
                <td>980px and up</td>
                <td>60px</td>
                <td>20px</td>
              </tr>
              <tr>
                <td>Portrait tablets</td>
                <td>768px and above</td>
                <td>42px</td>
                <td>20px</td>
              </tr>
              <tr>
                <td>Phones to tablets</td>
                <td>767px and below</td>
                <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
              </tr>
              <tr>
                <td>Phones</td>
                <td>480px and below</td>
                <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
              </tr>
            </tbody>
          </table>

Answer 3

Answer №2

In my quest to solve this issue, I took a different approach by utilizing viewport size calculation. In this method, I specified a 2:3 format for images and calculated their height based on this format and the viewport units I desired (adjusted to align with bootstrap2 gridsystem width calculations).

If you're interested, here is the link to the codepen showcasing the implementation:

Check out the codepen here

.imageFormatDiv {
  background-color: black;
  display: block;
  height: calc((2/3)*62.55vw);
  overflow: hidden;
  width: 62.55vw;
}

.imageFormatDiv2 {
  background-color: black;
  display: block;
  height: calc((2/3)*15.4vw);
  overflow: hidden;
  width: 15.4vw;
}

.imageFormatDiv img,
.imageFormatDiv2 img {
  min-height: 100%;
  min-width: 100%;
}

.rSection {
  margin-left: 15px;
}

.rSection ul {
  margin: 0px;
}

/* .rSection li {
  float: left;
  position: relative;
} */

.rSection li:nth-child(1),
.rSection li:nth-child(2),
.rSection li:nth-child(3) {
  padding-bottom: 3px;
  overflow: hidden;
}

/* @media screen and (max-width: 768px) {
  .imageFormatDiv {
    background-color: black;
    display: block;
    height: auto;
    overflow: hidden;
    width: auto;
  }
  .imageFormatDiv2 {
    background-color: black;
    display: block;
    height: auto;
    overflow: hidden;
    width: auto;
  }
} */

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container2 row-fluid">
  <div class="container1 span10" style="background-color:red">
    <div class="lSection span9" style="background-color:blue">
      <!--       <img class="contain" src="http://mw2.google.com/mw-panoramio/photos/medium/58123177.jpg"> -->
      <div class="imageFormatDiv">
        <img class="singleImage" src="https://placemaker.moredata.pt/documents/22267/23267/1-1-A.jpg">
      </div>
    </div>
    <div class="rSection span3 hidden-phone" style="background-color:orange">
      <ul>
        <li>
          <div class="imageFormatDiv2">
            <a><img src="https://placemaker.moredata.pt/documents/22267/23267/1-1-A.jpg"></a>
            <div class="pWrapper">
              <p>TEST 123</p>
            </div>
          </div>
        </li>
        <li>
          <div class="imageFormatDiv2">
            <a><img src="https://placemaker.moredata.pt/documents/22267/23267/1-2-3.jpg"></a>
            <div class="pWrapper">
              <p>TEST 123</p>
            </div>
          </div>
        </li>
        <li>
          <div class="imageFormatDiv2">
            <a><img src="https://placemaker.moredata.pt/documents/22267/23267/1-4-F.jpg"></a>
            <div class="pWrapper">
              <p>TEST 123</p>
            </div>
          </div>
        </li>
        <li>
          <div class="imageFormatDiv2">
            <a><img src="https://placemaker.moredata.pt/documents/22267/23267/1-3-D.jpg"></a>
            <div class="pWrapper">
              <p>TEST 123</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 4

In my quest to solve this issue, I took a different approach by utilizing viewport size calculation. In this method, I specified a 2:3 format for images and calculated their height based on this format and the viewport units I desired (adjusted to align with bootstrap2 gridsystem width calculations).

If you're interested, here is the link to the codepen showcasing the implementation:

Check out the codepen here

.imageFormatDiv {
  background-color: black;
  display: block;
  height: calc((2/3)*62.55vw);
  overflow: hidden;
  width: 62.55vw;
}

.imageFormatDiv2 {
  background-color: black;
  display: block;
  height: calc((2/3)*15.4vw);
  overflow: hidden;
  width: 15.4vw;
}

.imageFormatDiv img,
.imageFormatDiv2 img {
  min-height: 100%;
  min-width: 100%;
}

.rSection {
  margin-left: 15px;
}

.rSection ul {
  margin: 0px;
}

/* .rSection li {
  float: left;
  position: relative;
} */

.rSection li:nth-child(1),
.rSection li:nth-child(2),
.rSection li:nth-child(3) {
  padding-bottom: 3px;
  overflow: hidden;
}

/* @media screen and (max-width: 768px) {
  .imageFormatDiv {
    background-color: black;
    display: block;
    height: auto;
    overflow: hidden;
    width: auto;
  }
  .imageFormatDiv2 {
    background-color: black;
    display: block;
    height: auto;
    overflow: hidden;
    width: auto;
  }
} */

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container2 row-fluid">
  <div class="container1 span10" style="background-color:red">
    <div class="lSection span9" style="background-color:blue">
      <!--       <img class="contain" src="http://mw2.google.com/mw-panoramio/photos/medium/58123177.jpg"> -->
      <div class="imageFormatDiv">
        <img class="singleImage" src="https://placemaker.moredata.pt/documents/22267/23267/1-1-A.jpg">
      </div>
    </div>
    <div class="rSection span3 hidden-phone" style="background-color:orange">
      <ul>
        <li>
          <div class="imageFormatDiv2">
            <a><img src="https://placemaker.moredata.pt/documents/22267/23267/1-1-A.jpg"></a>
            <div class="pWrapper">
              <p>TEST 123</p>
            </div>
          </div>
        </li>
        <li>
          <div class="imageFormatDiv2">
            <a><img src="https://placemaker.moredata.pt/documents/22267/23267/1-2-3.jpg"></a>
            <div class="pWrapper">
              <p>TEST 123</p>
            </div>
          </div>
        </li>
        <li>
          <div class="imageFormatDiv2">
            <a><img src="https://placemaker.moredata.pt/documents/22267/23267/1-4-F.jpg"></a>
            <div class="pWrapper">
              <p>TEST 123</p>
            </div>
          </div>
        </li>
        <li>
          <div class="imageFormatDiv2">
            <a><img src="https://placemaker.moredata.pt/documents/22267/23267/1-3-D.jpg"></a>
            <div class="pWrapper">
              <p>TEST 123</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

How can I ensure that two adjacent divs maintain the same height for their content when resizing using CSS Bootstrap?

Answer №1

Answer №2

Similar questions

Achieving a centered layout for a div containing two photos that overlap on a mobile screen resolution

What steps do I need to take to ensure that the slideshow is visible upon opening

Enabling visibility of overflowing text in dynamically inserted divs without using scroll bars

Challenges Faced when Connecting JavaScript to HTML

Concealing the Footer on Mobile Websites in Muse UI When the Keyboard Appears

Optimizing window height to 100% on mobile Chrome

Every third item is selected using a JQuery selector

What is the reason for requiring a style to be set instead of using a class?

Adjust the buttons in Html using AngularJs to extend the width of the buttons completely

Jumping CSS dropdown menu glitch

Horizontal representation of data utilizing PHP and MySQL

Why is the CSS border not activating on hover in Chrome?

Updating the background image of a React app according to each component

Issue with displaying submenu in dropdown menu

What is the best way to turn off the responsive features in Bootstrap 4?

What is the best method for designing a button with both inner and outer shadow effects?

Tips on minimizing the vertical size of a mat field housing a mat-select dropdown

Utilizing Media Queries with Dynamic Vue Properties

Arrange divs in a vertical stack while maintaining a layout with two columns

The search form on my website is not functioning correctly as the input field is not taking any