CSS - Left and Right DIV with 100% width - html

Question

I am currently using a Bootstrap for my website with a left sideBar navigation.
At the main content, i have 2 container for left and right content.
What I want is like the image below and i already done this:
and when the toggle button is clicked then the `rightDiv` will resize
which is my main problem and i'm not able to do:
and when the browser/device is small lets say mobile device then it be
like this and i already done this.
I am able to do the first and third image but failed at the second image which will resize the rightDiv on toggle button clicked.
so far i have this in my HTML:
<div id="wrapper">
<!--Start of Sidebar navigation -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<span>Home</span>
</li>
....
</ul>
</div>
<!-- End of Sidebar navigation-->
<!-- Start Main Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<!--START OF LEFT DIV-->
<div class="row-post-container">
</div>
<!--END OF LEFT DIV-->
</div>
<!--START OF RIGHT DIV-->
<div class="main-right-side-container">
<div class="right-side-container">
....
</div>
</div>
<!--END OF RIGHT DIV-->
</div>
</div>
</div>
<!-- END Main Content -->
</div>
and in my CSS i have this for left and right sidebar of DIV:
.row-post-container{
display: table-cell;
float: left;
max-width: 800px;
width: 100%;
min-width: 300px;
margin-right: 20px;
}.main-right-side-container{
display: table-cell;
min-width: 300px;
width: 100%;
max-width: 300px;
vertical-align: top;
height: 300px;
float: left;
padding: 0px;
margin-top: 20px;
}
Anyone has an idea?
For more clarification please do ask me.
Please suggest only CSS.
Thak you very much.
EDIT: the orange is leftDiv and dark green at the right side of orange is RightDiv.

Answer 1

One of the main things you are not considering is having bootstrap columns.
I have modified the example link you gave me and duplicated to have the two columns instead of one. By default, this is the current skeleton or rather structure of the code in the example -
Current Implementation on the example site
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!-- your code here -->
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
Change to add columns like below -
In here, i suggest you should go on about adding more columns like so -
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8"> <!-- your leftDiv code here --> </div>
<div class="col-lg-4"> <!-- your rightDiv code here --> </div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->

Answer 2

First try to make full use of bootstrap classes, check this-
HTML-
<p><input type="button" id="showHideBtn" value="Slide Menu"></p>
<div id="sidebar-wrapper col-md-3">
<ul class="sidebar-nav">
<li>
<span>Home</span>
</li>
....
</ul>
</div>
<div id="page-content-wrapper" class="col-md-9">
<div class="container-fluid">
<div class="row">
<!--START OF LEFT DIV-->
<div class="col-xs-12 col-md-9 row-post-container">
</div>
<!--END OF LEFT DIV-->
<!--START OF RIGHT DIV-->
<div class="col-xs-12 col-md-3 main-right-side-container">
</div>
<!--END OF RIGHT DIV-->
</div>
</div>
</div>
CSS -
.hide{display:none !important;}
JS -
$('#showHideBtn').click(function(e){
$('#sidebar-wrapper').toggleClass('hide');
if($('#page-content-wrapper').hasClass('col-md-9')){
$('#page-content-wrapper').removeClass('col-md-9');
}else{
$('#page-content-wrapper').addClass('col-md-9');
}
});