Creating a single div to influence the height of surrounding divs

Here is a fiddle you can check out: http://jsfiddle.net/thiswolf/RGe24/3/ to see the image div and the orange and middle divs stretch to match its height without padding the orange box towards the bottom.

Here is the HTML code:

<section class="les_head">
    <article class="col-sm-3  les_pink faux_head">
        <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2009/1/23/1232730572620/Isla-Mae-Lubbock-002.jpg" width="100%" />
    </article>

    <article class="col-sm-7 les_pink  main_head">
        <span class="the_name ">Ed,Edd and Eddy - Totally Bonkers </span> 
        <hr/> 
        <span class="the_icons">
            <i class="glyphicon icon-twitter"></i> / 
            <i class="glyphicon icon-facebook"></i> / 
            <i class="glyphicon icon-skype"></i> / 
            <i class="glyphicon icon-google-plus"></i> / 
            <i class="glyphicon icon-dribbble"></i> / 
            <i class="glyphicon  icon-github"></i></span>
    </article>

    <article class="col-sm-2 les_orange les_mail">
        <i class="the_mail glyphicon glyphicon-envelope"></i>
        <span class="mail_text">Mail</span>
    </article>
</section>

And here is the CSS code:

.les_pink {
    background-color:pink;
}
.les_orange {
    background-color:orange;
}
.les_head {
    display:inline-block;
    border:1px solid red;
}
.faux_head {
    position:relative;
    height:auto;
    display:inline-block;
}
.faux_head > img {
}
.les_mail {
}
.les_mail > i {
    font-size:40px;
}
.the_mail {
    display:block;
    margin-left:28%;
}
.mail_text {
    margin-left:33%;
}

Feel free to check out the fiddle and let me know how I can achieve the desired effect.

Answer №1

Check out this example on JSFiddle. The key idea is to wrap the DIV elements you want to resize automatically inside a container with a defined height. This allows the children elements to calculate their height based on a percentage value.

#container{
    height:300px;
}

.blue, .green, img{
    float:left;
    height:100%;
}
.blue{
    background:blue;
}
.green{
    background:green;
}

Answer №2

section{
    display:table;
}
section_buttom{
    display:table-row;
}
article {
    width:200px;
    border:1px solid #333;
    display:table-cell
}

Kindly include an additional div within the section button and then position it beneath the article, applying the specified CSS which I believe will suit your needs.

Answer №3

One alternative is to utilize jQuery in order to retrieve the height of a specific element and then apply that height to other elements. Here's an example incorporating your class codes:

$(document).ready(function() {
  var adjusted_height = $(".faux_head").height();
  $(".main_head").height(adjusted_height);
  $(".les_mail").height(adjusted_height);
});

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

What steps can I take to resolve the TypeError issue with tailwindcss-cli where it is throwing an error stating that Object.fromEntries is

I've been diligently following tutorials by Tailwind and have encountered an error while trying to run the command npx tailwindcss-cli build css/tailwind.css -o build/tailwind.css. The error message I received is related to Object.fromEntries not bein ...

Utilize Bootstrap 4 to seamlessly integrate a small element between two lengthy items in a row, ensuring a gap

I would like to achieve a similar look to this design. https://i.sstatic.net/p1hq4.png hr { border: none; color: black; background-color: black; height: 5px; margin-top: 10px; } <div class="row code-line"> <div class="col-5 ...

The Electronjs application encountered an error while loading with the message "ReferenceError: require is not defined."

Having trouble with an electron application as I encounter an error when running npm start: $ npm start > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="483c2d3b3c087966786678">[email protected]</a> start C:& ...

Sorting table by priority in HTML is not functioning as expected

I am currently developing this code for a SharePoint 2010 platform. While the table can currently be sorted alphabetically, I am looking to implement a different functionality. Unfortunately, I am facing an issue with changing variables 'a' and ...

Preventing multiple clicks by toggling the HTML tag on and off

Here is the jQuery structure that I am currently working with: $(document).on('click', '.view-details', function () { $(this).prop("disabled", true); // API call1 // API call2 // API call3 $(this).prop("disabled" ...

What is the best way to use jQuery to attach functions to every input element?

Imagine you have a set of HTML markup and CSS like this: #CSS .inputhelp_text { background: #000; color: #fff; } .nodisplay { display: none; } <input class="inputhelp" id="firstname" /><span class="inputhelp_text nodisplay" id="help_firstname"& ...

Utilizing JavaScript to arrange the dots around the circle proves to be glitchy

I am having trouble positioning dots around a circle. The top and bottom points are not aligning properly, resulting in a buggy display. What could be causing this issue? How can I fix this problem? $(function(){ var globe = $('#center') ...

Tips on Selecting a Typed Value

When clicking on 'no_results_text' and it's not available in the list, I want to show the searched value from the alert. I have included an onclick method for 'no_results_text', so that the typed value is displayed in the alert. h ...

When fetching data from a parse object, JavaScript displayed [object, Object] as the result

When trying to access information from my parse data, I am able to display user table data on my document without any issues. However, when I attempt to query another object and insert it into an id element using jQuery with functions like text();, html(); ...

Transfer certain options to another selection except for the one currently chosen in the first one

My task is to use jQuery to generate multiple select elements. Each new select should copy the options from the previous one, excluding any that have already been selected by the user. This process should occur every time an option is changed. Select opti ...

Looking to modify and cache external links in a Rails application

v. Rails 2.3.8 How can outbound links in Rails be dynamically modified and cached using fragment caching? I'm eager to hear different approaches without any preconceived notions. Thanks! Note: I have purposely omitted my own thoughts and code to kee ...

Adjust the color of the input range slider using javascript

Is there a way to modify the color of my slider using <input type="range" id="input"> I attempted changing it with color, background-color, and bg-color but none seem to work... UPDATE: I am looking to alter it with javascript. Maybe something al ...

How to toggle the display of a div by its id using index in Javascript

Currently, I am encountering a problem with toggling the div containers. When I click on the video button, I want the other divs to close if they are already open. However, due to the toggling mechanism, if a div is closed and I click on the corresponding ...

An unusual outcome occurred while attempting to duplicate the text

After copying the letter A, I noticed that an empty string is being logged to the console instead of the expected A. However, when I paste, the console does successfully log the letter A. document.addEventListener('copy', handler); document ...

Switch up the checkbox status using a hyperlink within the checkbox manipulation strategy

My coworker and I collaborated on a website that features a FAQ page. Each question is followed by an "Answer" spoiler button. By clicking the button, the answer is revealed below the current question and above the next one. Clicking the button again hides ...

Adjust the background hue and opacity when incorporating a "modal div"

Currently, I have a page where a hidden div appears at some point to display a form for inputting data. This could be considered a modal div. My goal is to darken the rest of the page and only allow interaction with this specific div. I want the backgroun ...

What could be causing the incorrect styling of the <h1> tag and certain Bootstrap elements in my Vuejs project when I import Buefy?

In my webpack-simple Vue.js project, I am utilizing Bootstrap 4 and Buefy. However, upon importing Buefy as per the documentation, I noticed that my <tag does not resize the text correctly and the nav-bar in Bootstrap 4 is displaying the wrong width. T ...

Ways to incorporate bold, unbold, and italic styles into a single heading text within the same line using Bootstrap 4

Is there a way to format a single line of text with certain words bolded and the rest regular? I have a specific example pictured here: Picture of my Issue Specifically, I'm looking to bold "Honors:" and "Capstone:", while keeping the surrounding tex ...

Drag and Drop Feature using Angular with JQuery UI for Cloning Elements

I've been working on a web design project where I want to create a draggable user interface. https://i.sstatic.net/Be0Jk.png The goal is for users to click and drag different types of questions from the left side to the right side of the screen. Cu ...

centered table within a container with vertical alignment

I'm having trouble centering a table vertically in a div. I've tried using vertical-align but it's not working for me. Can anyone suggest a solution to place it at the top of the div? <div class="col-12 d-flex"> <div c ...