Ways to ensure that two divs have equal heights based on whichever one has the greater height using CSS

I need help with adjusting the heights of two divs inside a container div using CSS. Specifically, I want the height of the img_box div to match the height of the content_con div based on their actual content. For example, if the content_con div contains three paragraphs and has a height of 303 pixels, I would like the img_box div to adjust its height accordingly. How can I achieve this in CSS?

In essence, I want the img_box and content_con divs to have equal heights based on which one is taller. See the visual representation below:

<div class="box_container">
  <div class="img_box"></div>
  <div class="content_con"><div>
</div>


.box_container
----------------------------------------------
             |
   .img_box  |  .content_con
             |
----------------------------------------------
csshtml

Answer №1

To achieve this layout, you can use the method outlined below, regardless of the amount of data in the div. Both divs will have equal height.

.box_container{display:table;width:100% }
.img_box, .content_con{display:table-cell; vertical-align:top; width:50%}
.img_box{background:red;}
.content_con{background:yellow;}

Check out this demo to visualize how it appears:

http://jsbin.com/hidicoma/1/

Answer №2

Looking for a solution to create equal height columns? This method is perfect for three column layouts, where you can apply styles to the parent container, [parent container]:before and [parent container]:after. Otherwise, additional containers would be necessary.

.box_container {
    position: relative;
    z-index: 1;
    width: 100%;   
    background: yellow;
    overflow: hidden;
}
.img_box, .content_con {
   float: left;
   width: 50%;
   position: relative;
}
.img_box > *, .content_con > * {
    padding: 0 10px;
}
.box_container:before {
    background: red;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: -1;
}

http://jsfiddle.net/4Z8np/39/

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

Create a new variable and compile the sass/less file when it is requested

I'm exploring options to utilize Node.js or another server-side language to handle a specific type of request. For instance, receiving a request like this: The goal is to extract the value from the URL parameter and use it to dynamically update a var ...

javascriptcssajaxsassless

Angular Tag < with CSS styling

Why should we use the angular tag in CSS? For example: .class << span Typically, we use these types of tags: body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-si ...

htmlcsscss-selectors

Having trouble getting rounded-lg and rounded-md to work properly with Tailwind CSS - any ideas why?

I'm currently working with Next.js version 14.2.4 and tailwindcss version 3.4.1, and I've encountered an issue where rounded-lg and rounded-md classes are not applying any border radius. Oddly enough, other classes like rounded-xl and just rounde ...

cssnext.jstailwind-cssshadcnui

What's the best way to adjust the card column for mobile view resizing?

I am trying to modify the card view for mobile devices to display as a 2-column layout. I have adjusted the flex length and grid size in my code, but I still can't achieve the desired result. Can someone guide me on how to make this change? Current d ...

css

Ensure that the link's color remains constant and remove any styling of text-decoration

Attempting to create a customized header. My goal is to change the color and remove text decoration in the navbar. Below is my code snippet: ReactJS: import React from 'react'; import './Header.css'; function Header() { return ( ...

javascriptcssreactjs

Complete Form Validation Issue Unresolved by Jquery Validation Plugin

I'm facing an issue with the jQuery validation plugin while attempting to validate a form. Strangely, it only works for one input field. Can anyone suggest a solution? <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.valid ...

javascriptjqueryhtmlcssvalidation

Restrict the Number of Columns in GridView

I am currently working with a gridview that displays product information. I'm trying to find a way to limit the description field so that only the first few lines are shown if it is too long, and also resize the image to fit into the image column whil ...

asp.nethtmlcssgridview

Creating a Dynamic Landing Page with Node.js and Express

Recently, I purchased an HTML landing page and am a complete novice in this area... Upon inspection, I noticed there are three distinct folders: /windows /ios /android I'm interested in utilizing nodejs and express to showcase the landing page. Spec ...

htmlnode.jsexpresstwitter-bootstrap-3

The jquery script for the dynamic remove button is malfunctioning

I have successfully implemented code to display dynamic controls using jQuery. Below is the working code: <script type="text/javascript"> $(document).ready(function() { $("input[value='Add']").click(function(e){ e. ...

javascriptjqueryhtml

Unable to load XML in Chrome using JQuery

Can anyone explain why the code below works in Firefox but not Chrome? I'm currently testing it on my local machine. Thanks for any insights you can provide! <html> <head> <script type="text/javascript" src="jquery.js"> ...

jqueryhtmlxmlajax

Wrap link column data in a bootstrap table for a seamless display

Is there a way to make a link in a table cell wrap and respect the column width I provide? When data in a table cell is a link, it doesn't seem to let me specify the column width. How can this be achieved? <link href="https://cdn.jsdelivr.net/np ...

htmlcssbootstrap-5

What steps should I follow to make a sticker adhere to a div?

I'm currently in the process of designing a sticker that attaches to the top of a div, much like this: <div className="upgrade-premium"> <div className="upgrade-team"> <h1>Premium</h1> <p>100 ...

htmlcsssass

troubleshoot clientWidth not updating when CSS changes are made

Summary: When I adjust the size of a DOM element using CSS, its directive fails to acknowledge this change even with a watch on the size. Aim I have multiple custom directives (simple-graph) each containing an svg. My goal is to enlarge the one under the ...

javascriptcssangularjsangularjs-directive

Anchor tags are not visible to Jquery

My issue is with integrating JQUERY and PHP. In my external PHP file, I have the following echo statement - `echo ("<a href='#' id='bb'>hello</a>"); Similarly, in my external js file, I have this JQUERY code - $(' ...

javascriptphpjqueryhtmlajax

Grid is failing to adjust its size to accommodate the width of the items

Is there a way to adjust the width of each grid box based on the content nested inside? For instance, in the case of the second testimonial where the item has a max-width of 500px, but the grid box remains unchanged. I attempted to set widths and max-wid ...

htmlcss

If a single checkbox is selected within a group, then every other checkbox should be deactivated and deselected

Here is the code snippet provided: function listen(element, event, callback) { if (element.attachEvent) { element.attachEvent('on' + event, callback); } else { element.addEventListener(event, callback); } } var form = document.que ...

javascriptjqueryhtmlcheckbox

Making a secure connection using AJAX and PHP to insert a new row into the database

Explaining this process might be a bit tricky, and I'm not sure if you all will be able to assist me, but I'll give it my best shot. Here's the sequence of steps I want the user to follow: User clicks on an image (either 'cowboys&apos ...

phpjavascripthtmlajaxfunction

JavaScript code for validating two passwords is malfunctioning

I'm currently working on a registration form for my website and I'm trying to implement a JS script that compares two password inputs (password and repeat password) and displays a message saying "passwords are not the same." Below is the code I h ...

javascripthtmlbootstrap-4

Incorporate the "0" character into a PHP JSON call

I am currently working on a PHP page to retrieve data from Forecast.io's API. When looking at the daily view, they represent the days as numbers. I specifically need information for today, which is represented by the number "0." Here is an excerpt of ...

phphtmljsonparsing

Are you looking to analyze inputs and tally up any duplicates?

I am working on a form that requires users to input up to 20 1-4 character codes. My goal is to count each code entered and present the output in the following format: AB //entered once EFOO //entered once AACC x 2 //because AACC was entered twice into fo ...

phphtml