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: