CSS - setting all child elements to the height of the tallest child element

Is there a way to ensure that both fieldsets have the same height as the tallest one? See the code snippet below or visit this link for reference: http://jsfiddle.net/zpcXQ/2/

<div id="parent">

  <form>
    <fieldset id="left">
        <legend>Left</legend>
        <p>line 1</p>
        <p>line 2</p>
        <p>line 3</p>
    </fieldset>

    <fieldset id="right">
        <legend>Right</legend>
        <p>line 1</p>
    </fieldset>
  </form>

</div>

fieldset {
    border: 1px solid green;
    width: 48%;
    position: relative;
}

#parent {
    float: left;
    width: 600px;
    position: relative;
}

#left {
    float: left;
}

#right {
    float: left;
}

Answer №1

To achieve this functionality, you can utilize jQuery in the following manner:

var fieldSets = $("fieldset").toArray();
var maxHeight = 0;
for(var j=0; j< fieldSets.length; j++){
    var currentHeight = $(fieldSets[j]).height();
    if(currentHeight > maxHeight){
        maxHeight = currentHeight;
    }
}
$("fieldset").height(maxHeight);

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

Using CSS sprites to style text links

I've been attempting to incorporate an image with various icons for text links in an unordered list, but I can't seem to display just one icon with some space next to it for the text. The code I have so far is: http://jsfiddle.net/XyVtq/2/ This ...

Saving HTML form data to a text file

I have a form on my website's index.html that looks like this: <form id="demo" action='submit.php' method='post' enctype='text/plain'> link: <input type='text' name='web'></br> <i ...

What impact does switching from HTML input to form_for in Rails have on the structure of the code?

Recently, I made some adjustments to the website I've been working on. Initially, it was created using HTML, CSS, and Javascript. There was a section for email subscriptions which originally only had an HTML input field. However, as we started develop ...

What is the equivalent of a very deep selector in TailwindCSS?

When working with the v-deep selector to customize the appearance of tiptap, a rich text editor, accessing the .ProseMirror class in SCSS would look like this: editor-content { // ... styles &::v-deep(.ProseMirror) { // ... styles } } ...

Looking to achieve a scroll effect with mix-blend-mode using JavaScript?

I am seeking a method to adjust the background color of a specific element based on the background itself. While CSS offers the mix-blend-mode property, I am looking to specify the color manually. Ideally, I would like to achieve the same effect using an ...

The image source is unable to locate the image

Adding an image to my React component is proving to be problematic as the alternative text keeps being displayed instead. In the Navbar component, this is how I am trying to include the image: <img src="../assets/images/nav_logo.png" alt=&quo ...

What are alternative ways to divide CSS without relying on CSS-in-JS and CSS modules?

Recently, I transitioned to next.js and I'm eager to develop an application with CSS styles without resorting to css-in-js or inline styling. In my exploration, I've come across two potential options: using CSS modules or importing global styles ...

Strategies for enhancing the performance of this arbitrary playlist HTML5 audio script

<script type="text/javascript"> function random_music(){ var myrandom=Math.round(Math.random()*4); var musicurl='http://dummy.xy/dummy.mp3'; if (myrandom==0){musicurl='http://path_to.mp3';} else if (myrandom= ...

Attempting to determine income in JavaScript with the inclusion of two distinct rates

Trying to come up with a salary calculation for different rates within the same timeframe is proving to be quite challenging. For instance, between 10:00-15:00 the rate is $20 per hour and from 15:00 onwards it drops to $15 per hour. Check out the entire ...

Tips for resolving the issue of receiving a warning about passing "onClick" to a "<Link>" component with an `href` of `#` while having "legacyBehavior" enabled in Next.js

My current project is displaying a lot of warnings in the browser console and I'm unsure about the reasons behind it. The warnings include: "onClick" was passed to with href of /discovery/edit but "legacyBehavior" was set. The l ...

Issue with Semantic-UI Special PopUp not displaying on screen

I'm currently working on creating a unique pop-up feature using custom HTML, with the intention of adding content to it later on. My console is displaying the following message: Popup: No visible position could be found for the popup. $(document) ...

What causes the discrepancy in smoothness between the JavaScript animation when offline versus its choppiness when online, particularly on AWS

Recently I delved into game development using HTML5/CSS/JS and embarked on a small project. Check out the game here at this AWS storage link: If you open the game and press SPACE, you'll notice that the ball starts moving with occasional brief pauses ...

The appearance of a CSS select box may vary across different computers and web browsers

The appearance of a select box in HTML can vary between different computers and browsers. For example, on one computer using Google Chrome, the select box may look like this: https://i.stack.imgur.com/g2Xnn.png However, on my computer with Google Chrome, ...

Tips for resolving the issue of "Text stays in original position while image changes in the background when hovering over the text."

I'm currently working on a website and I have a question regarding how to make text stay in position while hovering over it (inside a span), and at the same time, display an image in the background that allows the text to overlay it. HTML: <ht ...

Continuous scroll notification within the fixed menu until reaching the bottom

I'm looking to achieve a scrolling notification message that stays fixed at the bottom of a top-fixed menu while the body content continues to scroll normally. Here's an example in this fiddle: HTML: <div class="menu-fixed">I am a fixed me ...

Is there a way to designate whether the <ul> element is displayed horizontally or vertically?

For example: <ul> <li>a</li> <li>b</li> </ul> The default output is: ab But I am looking for: a b Is there a way to achieve this? ...

The concepts of width and min-width in CSS allow for controlling

I have a table with the following styles applied: width: auto; min-width: 98.5%; When viewing in Chrome, the table inside a div appears to only be about 50% of the width of the containing div. However, in IE9, the table occupies the full width. Checking ...

Troubination of Bootstrap CSS is causing issues on Floating Action Menu

I've implemented a Floating Action Menu using JQuery and CSS: HTML: <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <div id="hamburger" class="waves-effect waves-light"> <div id="wrapper"> <span ...

Showing pictures from a database utilizing PHP and HTML

I'm looking to showcase the images stored in my database within an HTML table. The files are saved as 'BLOB' and I want them to appear under the 'Photo' column. Can anyone guide me on the code needed to display these images? ...

One-time PHP form submission only

On my website, I offer a variety of PDF download options. To access these downloads, I encourage visitors to sign up using a form. After signing up, they receive a direct link to the chosen PDF in their email. My goal is to streamline the process so that ...