The height of a CSS div is not adjusting to accommodate a larger child div

Currently, I am facing an issue with a container div that contains two child divs floated left and right. The height of these child divs depends on their content, which is primarily text.

The problem arises when the height of the container div does not adjust properly to fit both children; it only accommodates the right-hand div and does not resize for the left-hand div.

Although I have set the height of all divs to auto, I have also tried setting the size of the larger child div to 100%, but that did not have the desired effect.

Here are the relevant CSS snippets:

#container{
    height: auto;   
    width: 1000px;
    margin: auto;
    padding-top: 20px;
    background-color: white;
}

#content{
    height: auto;
    width: 600px;   
    margin: 10px 10px 0px 10px;
    background-color: white;
    float: left;
}

#aside{
    height: auto;
    width: 330px;   
    float: right;   
    margin: 10px 10px 0px 10px;
    padding: 5px 15px 5px;
    background-color: #E8E8E8;
    border-radius: 25px;
}

Basically, I aim for the container to adjust its height based on the taller child div (even though it tends to be the right-hand one). However, currently, it always matches the height of the smaller child.

For a visual representation, you can visit the website here:

Answer №1

To achieve the desired effect caused by the floated child, include overflow:auto in your CSS rules for either #footer or #container.

Answer №2


Here's a different approach you can take:
Include an invalid image within the aside element, such as:

<img src="fake.jpg" height="150px" style="display: none;">

Although, in my opinion, the initial solution remains the most effective.

Answer №3

Seems like a call for clearfix here. To resolve this issue, try assigning a class to both inner divs, for example, "floaters", and remove the float:left and float:right CSS properties from both divs. Instead, apply display:inline-block to the "floaters" class.

#container{
/*
The container, contains the page and the footer
*/
    height: auto;   /* this is the problem child...*/
    width: 1000px;
    margin: auto;
    padding-top: 20px;
    background-color: white;
}

#content{
/*
The container, contains the content of the webpage
*/
    height: auto;
    width: 600px;   
    margin: 10px 10px 0px 10px;
    background-color: white;
    /*float: left; */
}

#aside{
/*
The aside to be used for additional information
*/
    height: auto;
    width: 330px;   
   /* float: right;  */ 
    margin: 10px 10px 0px 10px;
    padding: 5px 15px 5px;
    background-color: #E8E8E8;
    border-radius: 25px;
}
.flaoters{
display:inline-block;
}

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

The Owl-Carousel's MouseWheel functionality elegantly navigates in a singular, seamless direction

Issue at Hand: Greetings, I am facing a challenge in constructing a carousel using Owl-Carousel 2.3.4. My goal is to enable the ability to scroll through my images using the mousewheel option. Code Implementation: Incorporating HTML code : <div style ...

Binding event listeners to dynamically created elements poses a challenge

I am facing difficulty in adding an event listener to dynamically created elements. The issue lies in my code where I am unable to detect the insertion of <p> element resulting in the lack of console message Bar Inserted. Could you point out if there ...

Looking to retrieve data from a database and display it in a textbox upon clicking a button using PHP

I am looking to extract data from a database and display it in text boxes on button click using PHP and Javascript. Specifically, I want to retrieve values from a database table and display them in corresponding text boxes when the user clicks on the add0 ...

This code appears to be invalid based on W3C standards - unsure on the solution to correct the errors

My website is quite large, but unfortunately it contains 31 errors. I am unsure of how to go about fixing them. I would greatly appreciate any assistance in resolving these errors, especially the ones that seem to appear for unknown reasons: http://valid ...

I'm experiencing some unusual behavior with the Windows media app when using HTML and CSS

I have a Windows Media Player box on my page, but it overlaps every piece of HTML code. How can I get it to move to the back so that I can still use it? Another problem is that everyone who visits my page needs a plugin to load it, even though most people ...

Steps for serving audio files in a Spring Boot application

Can someone advise on the best location to place my audio folder in order to reference it as src="audio/audio_name" within an HTML audio tag? I attempted placing it in the resources folder, but when using src="http://localhost:9191/resource ...

Implementing an onClick event for a button in order to access the Folder Browser function in VS2010 for a Web Site project

I'm looking to implement a Folder Browsing function for the first time. Essentially, I want to create a Button that, when clicked, opens up a Folder Browser (similar to when uploading a file) and allows users to select a location (drive or folder) whi ...

Incorrect color change on button triggered by onMouse actions and state fluctuations

While creating a user profile on my app, I encountered an issue with button coloring. When I try to add color functionality to the button, it turns red instead of green and remains red even when the mouse is not hovering over it. My goal is to have the but ...

The content displayed on body.innerHTML does not match the information found in the page source code

Why is the page source newer than the document.body.innerHTML, and how does this happen? While watching a video on YouTube and inspecting the page source in Chrome's console, I noticed that YouTube assigns a unique signature to all videos. Here are t ...

Retrieve, process HTML table information using Ajax from an external server or website domain

In order to demonstrate: :the html table data source = "example.com/html_page_source" (tableid="source") :an xml file created from the specified table data = "pretendco.com/xml_built_from_html_table I am seeking guidance on how to build an xml file from ...

Having additional space preceding list elements within a flexbox setup

Check out the code snippet below: HTML Code <ul class="menu"> <li><a href="#">Item 1</a></li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li& ...

Ensure the form is properly validated before initiating the submission process on 2checkout

Attempting to prevent the form from being submitted, I implemented the code below. Typically, this method works perfectly fine. However, when integrating 2checkout js (), it does not function as intended. <form onSubmit="validate(); return false;" meth ...

Height of the div dynamically increases upwards

Just a quick question - is there a way to make position: fixed divs at the bottom of an element (such as the body) grow upwards as content is dynamically added? Maybe something like anchor: bottom or increase: up? I'm thinking that using JavaScript m ...

What is the best way to display HTML in this particular situation?

This is the function I am working on: public static monthDay(month: number): string { let day = new Date().getDay(); let year = new Date().getFullYear(); return day + ", " + year; } I am trying to add <span></span> tags around ...

Adding numbers in JSP

Is there a way to trigger a popup alert message when the user inputs a correct or incorrect value and clicks on the "Go" button? I'm unsure of how to link the "Go" button with the Java code. Please assist me. <%@ page import="java.io.*,java.util. ...

Struggling to fetch option value from a dynamic add/remove list using a combination of PHP, jQuery, and HTML5

Having trouble accessing and displaying values from a select list. Constructed an add/remove list functionality using JQuery but unable to showcase the values using foreach and for loops. Specifically trying to obtain $existing_mID[$j] values from the &apo ...

Tips for designing websites using HTML and CSS

current result: https://i.sstatic.net/eXLPv.png desired output: https://i.sstatic.net/vgl6z.png I am aiming to center the text. add image description here add image description here ...

The functionality of the jQuery .click method appears to be malfunctioning within the Bootstrap

It seems like my JQuery.click event is not functioning as expected when paired with the corresponding button. Any ideas on what might be causing this issue? Here's the HTML CODE snippet: <button id="jan7" type="button" class="btn btn-dark btn-sm"& ...

Steps to eliminate the 'Edit Translation' text on Transposh

Attempting to eliminate the 'Edit Translation' text provided by Transposh to maintain the existing translations. Implementing CSS code like so: #transposh-3:nth-child(8){display:none;} and localizertextnode{display:none;} However, these styl ...

Transforming HTML produced by an outdated ASP system to generate modern ASP.NET 2.0 web pages

I have a friend who is currently working on developing a solution to convert aspx pages from html pages generated by an older asp application. The plan involves running the legacy app, capturing the html output, cleaning the html with a tool like HtmlTidy ...