Ways to set the height of a container div to match the inner div

I am struggling with setting a dive container that has a class of d with a red background color, and an inner div with class d2 that has a gray background color.

These specifications are illustrated in the pictures below,

and I would like div d to take on the height of div d2, but I am unsure how to achieve this.

This is the code snippet:

.d
{
    width:100%;
    height:100px;
    background-color:red;


}

.d2
{
    width:80%;
    height:auto;    
    float:left;
    background-color:Gray;

}

If I set the height of div d to "auto," the red color will disappear.

htmlcss

Answer №1

Ensure that you include an additional div with the style clear:both in order to set the height of d as auto.

<style>
.d
{
    width:100%;
    height:auto;
    background-color:red;
}
.d2
{
    width:80%;
    height:auto;    
    float:left;
    background-color:Gray;
}
</style>
<div class="d">
    <div class="d2">
    type something here<br />
    <br />
    <br />
    <br />
    <br />
    something again the parent div's height will depend by this div
    </div>
    <div style="clear:both;">
</div>

Answer №2

When the height of .d is defined (for instance, 100px in this scenario), you have the option to assign 

.d2 {
    height: 100%;
}

Answer №3

Seeing that the height of element D is already defined:

.d
{
  width:100%;
  height:100px;
  background-color:red;
}

You can now set the height of D2 to either 100px or 100%:

.d2
{
  width:80%;
  height:100px;    
  float:left;
  background-color:Gray;
}

Answer №4

It seems like your d2 height exceeds that of your d container. Perhaps you don't want the container to match the height of d2 if it's smaller, but should adjust if d2 is larger.

If this is the scenario, modify the height in your d to min-height: 100px;

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 PHP and JQuery to disable a button after the letter "U" is typed

I am looking for a way to disable the button when the term "U" (defined as Unable) appears. How can I achieve this? Below is the button in question: <input type="submit" class="form-control btn-warning" name="search" value="Search Data"></input& ...

javascriptphpjqueryhtmlforms

Angular html5 mode failing to serve index.html via Express

When attempting to implement html5 mode in my Angular JS app for better SEO, I encountered a challenge with Express serving index.html upon request. This resulted in deep linking issues and the inability to refresh the page. This is how my App.js is curre ...

angularjshtmlexpress

Ways to transition to an iframe window

I am having difficulty selecting an iframe popup window as it is not coming into focus. Below is the image of the popup window along with the button I am attempting to click: https://i.stack.imgur.com/VzkOX.png This is the code snippet that I have been ...

pythonhtmlseleniumselenium-webdriver

The html carousel displays stacked images instead of scrolling

I have been staring at this code for what feels like an eternity, trying to figure out why it's only displaying stacked pictures instead of a functioning carousel. Perhaps I overlooked something crucial. Could someone please lend a hand? My code is pr ...

javascriptjqueryhtmlcarousel

The issue with the data backdrop not functioning properly in Angular 6 is ongoing and

My issue lies with the data-backdrop attribute in my Bootstrap 4 modal. It does not function as expected. The intended behavior is for the modal to close when clicked outside of it, but this is not happening. I am using Angular 6: I have attempted setting ...

jqueryhtmlbootstrap-4angular6

Make sure to include the !important declaration when setting the fill property for

When attempting to apply !important to the fill property of an SVG file, I'm encountering issues with the syntax. Despite my efforts, the !important directive is not being correctly applied to the fill property, resulting in the circle element renderi ...

cssreactjssvg

JavaScript: Adjust DIV Width Based on Window Height

Is there a way to make the width of a div equal to the height of the window in jquery? I attempted this method: <script type="text/javascript"> $(".rt-container").style.width = $(window).height(); </script> Unfortunately, it did not work. I ...

javascriptjquerycss

Switch up your text display using JQuery and toggle between different texts

I have implemented a jQuery script to toggle the display of certain paragraphs when the "More" link is clicked. However, I am facing an issue where the link always displays "More" even after the content has been expanded. I want it to change to "Less" once ...

javascriptjqueryhtmlcsstoggle

What is the best way to show an error message on a webpage using jQuery within a PHP environment?

I have a form in HTML that includes a submit button for posting status on a page. When a user clicks the submit button without entering anything into the form field, I want PHP to display a simple error message on the same page saying "This status update s ...

javascriptphpjqueryhtmlcss

The Ajax request appears to be triggered twice, yet all other associated JavaScript functions are executed only once

Using ajax, I have a code that retrieves the contents of a PHP page every X seconds until completed=="yes". Each time it fetches the content, it displays an alert with <script>alert("checked");</script>. Within the PHP page, there is another al ...

javascriptphphtmlajax

Every time I click the highlight button, my navbar link inexplicably shrinks

I am struggling with adjusting the list style in my bootstrap navbar. Whenever I click on the highlight button, it squeezes my navbar and I'm not sure how to fix it. <div id="links"> <a href="index.html">Home& ...

htmlcssheaderbootstrap-5

Dear C# Tag Builder, I am looking for a way to add an attribute without a value in order

Attempting to create input checkbox HTML using Tag Builder in C#, ran into an issue trying to include the disabled field. The attribute doesn't allow null or empty values, so how can an attribute be added without a value? var builder = new TagBuilder ...

c#htmltagbuilder

Unveiling the Masked Phone Number in jquery.maskedinput for Database Insertion

Currently, I am grappling with removing the phone number mask while working with jquery.maskedinput.min.js in an MVC web app. Here is the JavaScript code snippet I am using: @section Scripts { @Scripts.Render("~/bundles/jqueryval") <script type="text/ ...

javascriptjqueryhtmlasp.net-mvc

Exploring ways to reset or deselect the value of a radio button sharing the same name

Seeking to create a multiple-choice quiz question with 4 options each. I aim to include an individual reset button for every question, which when clicked will uncheck or reset all radio buttons. How can I reset the radio buttons within the same group or ...

javascriptjavahtml

Adjustable spacing for elements located under a fixed navigation bar on small screens

My website has a navbar that increases in height for smaller window sizes due to the text logo wrapping. How can I adjust the padding dynamically for the jumbotron below, so it is not partially covered by the navbar when the text logo spans multiple lines? ...

htmlcsstwitter-bootstrapbootstrap-4css-position

How can I ensure a DIV is shown on every sub-page?

Is there a way to dynamically display a <div id="chatbox"> in all subpages without needing to manually edit each one? For example, adding this code to the main index.html file and having it appear on /products/index.html. ...

htmlcssindexing

Getting rid of excess space at the bottom of a page while employing a sticky image

I am currently working on a layout where I have utilized the position: sticky property to position an image near the bottom right corner of the page, under a flex layout: .footer-logo {position: sticky; bottom: 50px; z-index: 100; margin: 50px; padding: ...

htmlcss

Implementing a feature in Django to load a different template when a button is clicked

I've been experimenting with a Django project for a few weeks now to get the hang of it. I have a template named "home.html" and I'm interested in creating another template called "profile.html" that can be linked from the home.html template by c ...

jquerypythonhtmldjangotemplates

How come the changes in my react component's CSS are not updating in real-time?

After integrating redux into my create-react-app project, I've been struggling to implement a navigator that highlights the active "page link." To achieve this functionality, I am using a combination of react hooks (to maintain the current page state) ...

cssreactjswebpacksassmaterial-ui

ng-click is not triggering my function

I'm really struggling to understand how AngularJS and Typescript can work together efficiently. My main goal is to make a simple method call, but I seem to be stuck due to some constraints in the architecture I have chosen. I must have made a mistake ...

htmlangularjstypescript