How can I ensure the height of both right divs matches the height of the left divs using CSS?

Question

How can I ensure the height of both right divs matches the height of the left divs using CSS?

I redesigned my website layout, dividing it into two sections: right and left. The left section contained 3 boxes, while the right section only had one. Initially, the height of the box on the right would adjust to match the combined height of the boxes on the left. However, I decided to add another box below the existing box on the right and now I want the same height adjustment for both new boxes - the total height of the two boxes on the right should always equal the total height of the three boxes on the left. Below is the code snippet that worked with just one box on the right:

<div class="right">
    <div class="boxx details-history">
        <div class="boxx-content">
            Box content goes here
        </div>
    </div>
</div>

And here is the corresponding CSS:

.right{ float: right; display: inline; width:404px; position:relative; }
.boxx { margin-top:11px;  }
.boxx:first-child { margin-top:0;  }
.boxx .boxx-content { background: #fff; padding:4px 18px; color:#a7a7a7;
  font-family: 'Roboto', sans-serif; font-weight:300; border-radius: 0 0 3px 3px; }
.details-history .boxx-content { padding: 0 0 0 0!important; position:absolute; 
   left:0; right:0; bottom:0; top:22px; }

Below is the new code snippet:

<div class="right">
    <div class="boxx details-history">
        <div class="boxx-content">
            Box content goes here
        </div>
    </div>
    <div class="boxx details-coursework">
        <div class="boxx-content custom-scroll">
            Box content goes here
        </div>
    </div>
</div>

I've been struggling for hours to write the CSS code to achieve this, but have not been successful so far. I believe the solution involves removing the 'position: absolute;' from .details-history and creating a new class called details-coursework, but I haven't been able to figure out the exact steps to take.

html css-position css

Answer 1

Answer №1

For the task at hand, I devised a solution using two boxes: one on the left and one on the right. The challenge was to ensure that the height of the right box adjusted dynamically based on the height of the left box, which could vary. The right box contained a substantial amount of scrollable text.

  #container {
    width: 200px;
  }

  #left-positioner-parent {
    position: relative;
    /* Width of the left box relative to #container.
        Could be in pixels too. */
    width: 50%;
  }

  /* Contained style to exclude use of calc()
      with border width and height in #right-box */
  #left-box {
    border: 15px solid red;
  }

  #right-box {
    position: absolute;
    /* To exclude use of calc() */
    box-sizing: border-box;
    left: 100%;
    width: 100%;
    top: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border: 5px solid black;
  }

  #right-content {
    /* No need of styling for this example */
  }

<!-- A container for useful example width -->
<div id="container">

  <!-- A different div for the left content is to allow
    the left div to have borders without using CSS calc()
    and border width and height in right div's style. -->
  <div id="left-positioner-parent">

    <div id="left-box">Left<br>block of text.</div>

    <div id="right-box">
      <!-- Some long scrollable content -->
      <div id="right-content">Right<br>block<br>of<br>text<br>with<br>multiple<br>lines.</div>
    </div>
  </div>
</div>

Answer 2

For the task at hand, I devised a solution using two boxes: one on the left and one on the right. The challenge was to ensure that the height of the right box adjusted dynamically based on the height of the left box, which could vary. The right box contained a substantial amount of scrollable text.

  #container {
    width: 200px;
  }

  #left-positioner-parent {
    position: relative;
    /* Width of the left box relative to #container.
        Could be in pixels too. */
    width: 50%;
  }

  /* Contained style to exclude use of calc()
      with border width and height in #right-box */
  #left-box {
    border: 15px solid red;
  }

  #right-box {
    position: absolute;
    /* To exclude use of calc() */
    box-sizing: border-box;
    left: 100%;
    width: 100%;
    top: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border: 5px solid black;
  }

  #right-content {
    /* No need of styling for this example */
  }

<!-- A container for useful example width -->
<div id="container">

  <!-- A different div for the left content is to allow
    the left div to have borders without using CSS calc()
    and border width and height in right div's style. -->
  <div id="left-positioner-parent">

    <div id="left-box">Left<br>block of text.</div>

    <div id="right-box">
      <!-- Some long scrollable content -->
      <div id="right-content">Right<br>block<br>of<br>text<br>with<br>multiple<br>lines.</div>
    </div>
  </div>
</div>

Answer 3

Answer №2

To achieve the desired outcome without using JavaScript, one option is to specify heights for each element.

HTML

<div class="wrapper">
    <div class="left">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    <div class="right">
        <div class="one"></div>
    </div>
</div>

CSS

.left {
    width : 50%;
    height : 1000px;
    background : rgba(0,0,200,0.1);
    float : left;
}

.right {
    width : 50%;
    height : 1000px;
    background : rgba(200,0,0,0.1);
    float : right;
}

.left div {
    margin : auto;
    margin-top : 20px;
    width : 90%;
    height : 100px;
    background : rgba(200,0,0,0.1);
    border : #FFFFFF 1px solid;
}

.right .one {
    margin : 20px auto;
    width : 90%;
    height : 344px;
    background : rgba(200,0,0,0.1);
    border : #FFFFFF 1px solid;
}

For a demonstration, you can view this Fiddle

Answer 4

To achieve the desired outcome without using JavaScript, one option is to specify heights for each element.

HTML

<div class="wrapper">
    <div class="left">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    <div class="right">
        <div class="one"></div>
    </div>
</div>

CSS

.left {
    width : 50%;
    height : 1000px;
    background : rgba(0,0,200,0.1);
    float : left;
}

.right {
    width : 50%;
    height : 1000px;
    background : rgba(200,0,0,0.1);
    float : right;
}

.left div {
    margin : auto;
    margin-top : 20px;
    width : 90%;
    height : 100px;
    background : rgba(200,0,0,0.1);
    border : #FFFFFF 1px solid;
}

.right .one {
    margin : 20px auto;
    width : 90%;
    height : 344px;
    background : rgba(200,0,0,0.1);
    border : #FFFFFF 1px solid;
}

For a demonstration, you can view this Fiddle

Answer 5

Answer №3

To achieve this effect, you'll need to use a workaround. CSS alone won't cut it. Utilizing percentage-based heights with a predetermined number of boxes might be helpful, but JavaScript would be necessary to calculate and set the parent's height. Depending on your design, one simple approach could be as follows:

<div class="container">
    <div class="right">
        Insert Your Desired Content Here
    </div>
    <div class="left">
        Insert Your Desired Content Here
    </div>
    <div class="clear"></div>
</div>

.right {
    float:right;
    width:404px;
 }
.left { margin-right:404px; }
.clear { clear:both; } /* Alternatively, use a different clearing method */

By implementing this structure, you'll create columns within a container equal in height to the tallest element. To visually balance the columns, consider adding a background image to the .container element featuring a 404px graphic on the right side. This illusion will give the appearance of equal column heights, even though the right side isn't physically as tall as the left side.

Answer 6

To achieve this effect, you'll need to use a workaround. CSS alone won't cut it. Utilizing percentage-based heights with a predetermined number of boxes might be helpful, but JavaScript would be necessary to calculate and set the parent's height. Depending on your design, one simple approach could be as follows:

<div class="container">
    <div class="right">
        Insert Your Desired Content Here
    </div>
    <div class="left">
        Insert Your Desired Content Here
    </div>
    <div class="clear"></div>
</div>

.right {
    float:right;
    width:404px;
 }
.left { margin-right:404px; }
.clear { clear:both; } /* Alternatively, use a different clearing method */

By implementing this structure, you'll create columns within a container equal in height to the tallest element. To visually balance the columns, consider adding a background image to the .container element featuring a 404px graphic on the right side. This illusion will give the appearance of equal column heights, even though the right side isn't physically as tall as the left side.

How can I ensure the height of both right divs matches the height of the left divs using CSS?

Answer №1

Answer №2

HTML

CSS

Answer №3

Similar questions

Styling Angular Material Forms: Customizing Input Backgrounds and Button Heights

Guide on combining vendor CSS files in a React application using Webpack

The variable $_FILE fails to retrieve the file, resulting in PHP displaying an undefined variable error

Adjusting the width of columns in a flex layout using Bootstrap 4

What is preventing the table from extending to the full 100% width?

Swap out symbols for pictures

Navigating Divs Using jQuery

jQuery Files in Conflict

Tips for aligning text in a stylish way on an Angular Material Button

Creating a table in HTML using the innerHTML property

What is the best way to halt Keyframe Animation once users have logged in?

Tips on aligning multiple elements vertically in a justified manner

Flipping over every single card, but only desire to flip them one at a time

Error: Attempting to assign value to the 'innerHTML' property of null in a Wordle clone with local storage

A common challenge in React is aligning the button and input line on the same level

Learn the steps to successfully rotate the custom icon in Material-Ui select without impacting its functionality and making sure it remains clickable

Ways to stop two JavaScript files from running at the same time

Utilize JQuery variables for toggling the visibility of various DIV elements

Implementing a feature to insert a horizontal rule button in React Draft Wysiwyg

I'm noticing that my Tailwind styles don't take effect until I redefine them. What could be causing