I have diligently searched for a solution to my issue both on Google and here, but have yet to find one that works. I've experimented with various CSS properties like display: table-cell and inline-block, as well as different overflow options, but nothing seems to be effective.
My sidebar tends to be longer than the content around 99% of the time. Setting a min-height would be a simple fix, however, I have 3 distinct sidebars based on user login which vary in length. One of them is significantly longer than the other two, making height adjustments impractical.
<div class="container">
<?php include ('sidebar.php'); ?>
<div class="content">
content
</div>
</div>
The current state of my CSS:
.container {
width: 1210px;
background: #<?php echo $contentbgcolor; ?>; /* content bg colour */
margin-left: auto;
border-bottom: 1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
margin-right: auto;
overflow: auto;
}
.content {
padding: 10px;
float:left;
}
.sidebar {
width: 250px;
overflow: auto;
position: absolute;
float:left;
padding: 10px 0px 0px 10px;
}
I would greatly appreciate any help with this matter.
Here is an example of the full HTML code:
<!-- Your complete HTML code goes here -->