I am working on a web design project where I want the height of the content division to adjust based on its nested divs. Here is how I have set it up:
<div id="content">
<div id="col1">content</div>
<div id="col2">content</div>
</div>
These are the CSS styles I am using:
#content {
height:auto
position: relative;
}
#col1 {
width: 30%px;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
}
#col2 {
width: 68%;
height: auto;
position: absolute;
right: 0px;
top: 0px;
}
The issue is that when the content height is set to auto, the div collapses instead of adjusting to match the taller column (#col2).
Do I have to manually set a specific height for the div to prevent it from collapsing, or is there another solution that I am overlooking?