I am currently working on a sidebar that can be shown or hidden using JavaScript with CSS animations. To achieve this effect, I need to position the content div (#main) using left: 250px;.
#main {
left: 250px;
position: relative;
overflow: hidden;
}
The #main div contains various content, such as a large table.
<div id="sidebar">
SIDEBAR
</div>
<div id="main">
<table style="width: 100%" class="table">
<tr>
<td>SOME BIG CONTENT1...</td>
<td>SOME BIG CONTENT2...</td>
<td>SOME BIG CONTENT3...</td>
<td>SOME BIG CONTENT4...</td>
<td>SOME BIG CONTENT5...</td>
<td>SOME BIG CONTENT6...</td>
</tr>
</table>
</div>
My question is: How do I prevent the horizontal scroll bar from appearing?
You can view an example at: https://jsfiddle.net/3y6hpeyw/
EDIT: Solution by KCarnaille: You can find the solution here: https://jsfiddle.net/3y6hpeyw/12/
Please note that this solution may not work in older browsers (http://caniuse.com/#feat=calc).