I'm facing an issue with the layout of my website - I have a main content div and a sidebar. The height of the content div adjusts based on the content being loaded, but I want the sidebar to always extend all the way down matching the maximum size of the content. If you'd like to check out a working example, feel free to visit this JS Fiddle link. In the fiddle, you can see how the sidebar is not extending all the way down as desired. For those who prefer plain text instructions: CSS:
#content {
border: 1px solid black;
float: left;
width: 80%;
}
#sidebar {
width: 19%;
border: 1px solid red;
float: left;
background-color: #ddd;
}
p {
text-align: right
}
<div id="container" style="background-color: #f2f2f2">
<div id="content">Here is some content that varies in height.
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>I want the sidebar to fully extend down here to match the height of the content.</p>
</div>
<div id="sidebar">The sidebar should always adapt its height to match the #content div dynamically.</div>
<div style="clear:both"></div>