Make content stretch with sidebar - css

Question

Before I start I will categorically state I have searched for an answer both here and on Google but no solutions have worked for me. I have tried display: table-cell, inline-block, all types of overflow but nothing is working.
My sidebar will 99% of the time be longer than the content. I would just set a min-height, however I have 3 different sidebars depending on what user is logged in. One is about 4 x longer than the other 2, so setting heights wouldn't work.
<div class="container">
<?php include ('sidebar.php'); ?>
<div class="content">
content
</div>
</div>
My CSS currently:
.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;
}
Would appreciate any assistance.
Full HTML example:
<div class="container">
<div class="sidebar">
<!-- Time Sidebox -->
<div class="sidebarBoxHeader">
Metropolis Time
</div>
<div class="sidebarBox">
<div id="clock" style="text-align:center; font-weight: bold; font-size: 18px;"></div><div style="text-align:center;">Sunday 5th April</div>
</div>
<!-- End time sidebox -->
<!-- Current game sidebox -->
<div class="sidebarBoxTitle">
Current Game(s)
</div>
<div class="sidebarBox" align="center">
<div align='center'>No games currently.</div>
<div style="margin-top: 10px;"><i class="fa fa-external-link"></i> View today's schedule</div>
</div>
<!-- end current game box -->
<!-- Current game sidebox -->
<div class="sidebarBoxTitle">
Staff on Duty
</div>
<div class="sidebarBox" align="center">
<div align='center'>No staff on duty.</div><div style="margin-top: 10px;"><i class="fa fa-external-link"></i> View full staff roster</div>
</div>
<!-- end current game box -->
<!-- Start Links Sidebox -->
<div class="sidebarBoxTitle">
Dashboard
</div>
<div class="sidebarBox borderBottom">
<ol style="list-style: none; display: inline; -webkit-padding-start: 0px;">
<li><i class="fa fa-home"></i> Admin Home</li>
<li><i class="fa fa-gamepad"></i> Game Management</li>
<li style="padding: 5px 0px 5px 0px;"><b>Schedule Options</b></li>
<li><i class="fa fa-paint-brush"></i> Customize Schedule
<li><i class="fa fa-pencil"></i> Edit Pages</li>
<li style="padding: 5px 0px 5px 0px;"><b>Event Management</b></li>
<li><i class="fa fa-trophy"></i> Manage Events
<li><i class="fa fa-plus-circle"></i> Add New Event
<li style="padding: 5px 0px 5px 0px;"><b>Staff Management</b></li>
<li><i class="fa fa-users"></i> Staff Management</li>
<li><i class="fa fa-calendar"></i> Roster Management</li>
<li><i class="fa fa-link"></i> Sponsor Management</li>
<li style="padding: 5px 0px 5px 0px;"><b>Administration</b></li>
<li><i class="fa fa-users"></i> User Management</li>
<li><i class="fa fa-cogs"></i> Permission Groups</li>
<li><i class="fa fa-sitemap"></i> Page Permissions</li>
<li style="padding: 5px 0px 5px 0px;"><b>Staff Links</b></li>
<li><i class="fa fa-gamepad"></i> Your Sponsored Games</li>
<li><i class="fa fa-users"></i> Your Sponsored Hosts (Weekly)</li>
<li><i class="fa fa-users"></i> Your Sponsored Hosts (Event)</li>
<li><i class="fa fa-calendar"></i> Your Staff Roster</li>
<li style="padding-top: 10px;"><i class="fa fa-wrench"></i> Account Settings</li>
<li><i class="fa fa-sign-out"></i> Log Out [ admin ]</li>
</ol>
</div>
<!-- End links sidebox -->
</div>
<div class="content">
<div style="padding-bottom:10px;">
<form name="form1" method="get" action="">
<select name="Event" required style="width:257px; height:25px; font-size:18px; border:1px solid #000;">
<option value="">Change Event</option>
<option value='NewEvent'>NewEvent</option><option value='oneady'>oneady</option><option value='Test'>Test</option><option value='Testing'>Testing</option></select>
<input type="submit" name="submit" class="buttonRefresh" value=" "></div>
<div class="contentBoxHeader">
Your Sponsored Hosts for event
</div>
<div class="schedBox">
<table width="100%" border="0" cellpadding="2" cellspacing="0" align="center">
<tr>
<td width="50%" class="schedHeader">Host Name</td>
<td width="50%" class="schedHeader">Prize Sets Required</td>
</tr>
<tr>
<td class="schedHeader" style="border-top: 1px solid #000;">Total Prize Sets Required:</td>
<td class="schedHeader" style="border-top: 1px solid #000;"></td>
</tr>
</table>
</div>
</div>
</div>
<div class="footer">
<div class="footerTxt">
Schedule Interface Version 1.0 Beta.
</div>
</div>

Answer 1

Removing the position:absolute on the sidebar appears to resolve the issue.

Answer 2

Try using bootstrap. it responsive design and you can simply set your div width with it. download it here.