Acquiring the height of the div

I am trying to achieve a specific layout for my webpage. My goal is to make the background color of the red div match the height of the combined heights of the divs with heights 15.56 + 77.33 + 73.33.

<body>
    <!-- outer div -->
    <div style="background-color:gray;">
        <div style="background-color: black; float: left;">
            <div>
                <div>
                    <div style="height: 15.56px; background-color: blue;">Blue</div>
                    <div style="height: 77.33px; background-color: green;">Green</div>
                    <div style="height: 73.33px; background-color: orange;">Orange</div>
                </div>
            </div>
        </div>
        <div style="background-color: red; display: inline-block; height: inherit;">
            Should be red!
        </div>
    </div>
<body>

Image depicting how its appearing currently

Answer №1

Use the display:flex property to wrap a div (therefore, you won't need to use float)

It seems that setting height: inherit; did not work because you need to set the height to the sibling DOM element, not the parent, as explained in this article.

The inherit keyword means that a property should inherit its value from its parent element.

.outer{display:flex}
<body>
    <!-- outer div -->
    <div style="background-color:gray;" class="outer"> 

        <div style="background-color: black;">
            <div> 
                <div> 
                    <div style="height: 15.56px; background-color: blue;">Blue</div> 
                    <div style="height: 77.33px; background-color: green;">Green</div> 
                    <div style="height: 73.33px; background-color: orange;">Orange</div> 
                    </div>
                </div>
            </div>

            <div style="background-color: red;"> 
                Should be red!
            </div>              
        </div>
    <body>

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

How can I access and modify objects within a state array in reactJS when using the setState() method?

Upon reviewing my code, I came across the following declaration: constructor(props) { super(props); this.state = { productArray: [{ barcode: '', name: '' }], numberOfRecords: ...

Dark opaque background image with Material-UI styling

I'm enclosing all the widgets within a CardMedia component, and adding an image. return ( <CardMedia image={bg} className={classes.bg}> <main className={classes.content}> <div className={classes.toolbar} /> <Grid contai ...

How can I achieve the functionality of an image changing when clicked and going back to its original state upon release with the help of HTML

I am facing an issue with styling an element to look like a button and function as a clickable link. My goal is to create a visual effect of a pressed button when it is clicked, while also loading the target page. For reference, here is a (non-working) J ...

Retrieving chosen items from NextUI-Table

I am completely new to JavaScript and NextUI. My usual work involves C# and DotNET. I have a requirement to create a table with selectable items, and when a button is clicked, all the selected items should be passed to a function on the server that accepts ...

What is the best way to send file data using the form-data format in Postman with React?

When I first started working with React, I encountered the need to transmit data from the frontend to the backend using an API. The data was in the form of form-data from POSTMAN, as shown in the image below. https://i.sstatic.net/U9QMe.png I opted to us ...

Having trouble aligning image and expanding video to fit the screen in a NextJS application

I need help with: centering the image above the waitlist sign up scaling the background video in a relative way to fill the screen regardless of browser size This is the relevant part of index.js: import Head from 'next/head' import Image from ...

Conceal/reveal specific sections of a table cell using jQuery

Here is a table I have: A header Another header First (some-text-initially-hidden) click row Upon clicking, it changes to: A header Another header First (some-text-should-be visible now) click row However, the text "some-text-initially-hi ...

Tips on adjusting the width of a border

I'm facing a challenge with my select box setup: <select class="selectpicker" multiple data-live-search="true" name="color[]" title="Nothing selected yet"> <option class="" style="border-bottom:2px solid; border-color:red" value="">Red&l ...

What advantages does utilizing an angular directive provide in the context of a comment?

Up to now, I have primarily used Directives in the form of Elements or Attributes. Is the Comment style directive simply a matter of personal preference for style? app.directive('heading', [function () { return { replace: true, ...

What is the proper way to utilize JQuery and Ajax to communicate with a global function in writing?

My goal is to retrieve data from an AJAX request and store it in a global variable. Despite trying to make the call synchronous, I am encountering issues where the value of the global variable becomes undefined outside of the Ajax request. I have attempt ...

Failing to retain hyperlinks with ajax

Currently, I am utilizing ajax to transmit data from a sophisticated custom field wysiwyg editor. Within this setup, the specific div with the class 'bio' is what I'm addressing. The issue arises when the data is retrieved - all the original ...

A guide on using Xpath to compare content between two tags

I am facing the following scenarios with $html contents. I am trying to determine if the html content starts with a media element (such as an image, video, or iframe) without any text content, similar to the third scenario below. //no contetn between firs ...

Enhance the list visualization in Next.js by efficiently transferring data from child components

In my Next.js Page component, I have a setup similar to the following: export default function Index({ containers }) { const [containerListState, setContainerListState] = useState(containers); const updateContainerList = (container) => { contai ...

Issue with Bootstrap 4 anchor links not leading to intended target

I recently built a one-page index page using Bootstrap 4, complete with a navbar containing hyperlinks that smoothly navigate to different sections of the page. For example, the "Events" nav link takes users to the section identified by id="events&quo ...

Converting Decimal to RGB Values using JavaScript and PHP

Seeking assistance with converting a decimal value to an RGB value. Here is the formula I am using to compile the decimal value: c = r*(255*255)+g*255+b For instance, rgb(16,120,78) results in 1071078. What is the best way to solve for r, g, and b with ...

ui-router: Issue with ui-sref causing font color to remain unchanged

I've been trying to customize the font color of a navigation link using ui-router's ui-sref functionality, but I'm facing an issue. While I can change the background color by adding it to the .active class in my CSS, the font color remains u ...

How can I dynamically adjust the stroke length of an SVG circle using code?

In my design project, I utilized Inkscape to create a circle. With the fill turned off, only the stroke was visible. The starting point was set at 45 degrees and the ending point at 315 degrees. After rotating it 90 degrees, here is the final outcome. < ...

Shimmering effect on hover for CSS animation

Is there a way to create a CSS-only animation that fades in and out until hovered when displayed in full? I can achieve both effects separately, but I'm struggling to make them work together. The hover element doesn't seem to be functioning prope ...

What is the best way to enable CSS IntelliSense for a Nuxt project?

Currently, I am undertaking a project using Nuxt.js and have set up a Docker image to manage all aspects of it. Additionally, I am looking to integrate MDBVue as a CSS library into my project. After some research, I learned that in order to utilize this li ...

Issues with dynamically generating buttons using Ajax and Javascript technology

In order to dynamically create buttons based on the contents of a text file during the onload event, I have written a JavaScript function. However, despite being able to read the file and using alert messages to verify the correctness of the variable &apos ...