After successfully building numerous websites and fixing various issues along the way, I now find myself stuck on a particular problem. Despite my experience, I can't seem to figure it out this time.
The issue lies within a wrapper div that contains two inner divs. When the content in the inner div exceeds the height of the wrapper div, it simply overlaps instead of expanding the wrapper div's height. My objective is to make sure the wrapper div adjusts its height according to the inner div.
Here is the code snippet I am currently using:
<body>
<div id="wrapper">
<div id="site-wrapper">
<div id="header"></div>
<div id="colpos">
<div id="columnLeft">
<div id="mainWrap">
<div id="contentBar"></div>
<div id="main">
Content
<div id="longDiv">Very long</div>
</div>
</div>
</div>
<div id="columnRight">
<div id="links">
<div id="navBar"></div>
Links
</div>
</div>
</div>
<div id="footer">Copyright</div>
</div>
</div>
</body>
And here is the corresponding CSS style:
html {
margin: 0px;
padding: 0px;
font-family: Calibri, arial;
}
#longDiv{
height: 2000px;
color: white;
background-color: black;
}
#wrapper{
width: 1200px;
margin: 0px;
padding: 0px;
border: 0px;
}
/* Additional CSS styles removed for brevity */
In summary, my current setup has resulted in an overlapping issue as shown in the image here. Your help in identifying the mistake I've made would be greatly appreciated. Thank you in advance.
Sincerely, EvilTuinhekjeNL