I am facing an issue with a container that contains 3 DIVS: left sidebar, main content, and a right sidebar. I have made the main content responsive by setting the width to width:calc(100% - 400px); (where 400px is the combined width of the sidebars). However, the problem arises when one of the sidebars is hidden as the width of the main content does not adjust accordingly.
I am looking for a solution that does not involve using JavaScript (such as addClass/removeClass) on the main-content class. Is there a way to achieve this without JavaScript?
HTML
<nav><h2>Navigation menu</h2></nav>
<div ng-app="myApp" class="container" ng-controller="myCtrl">
<div ng-hide="showme" class="left-sidebar sidebar">
<h2>Left sidebar</h2>
<hr/><hr/>
<center><button ng-click="showme=true">Collapse</button></center>
<hr/><hr/>
</div>
<div class="main-content">
<h1>Documents</h1>
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Description</th>
<th>Sender</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="json in jsonObj.documents">
<td ng-bind="json.id"></td>
<td ng-bind="json.name"></td>
<td ng-bind="json.description"></td>
<td ng-bind="json.sender"></td>
<td ng-bind="json.date"></td>
</tr>
</tbody>
</table>
</div>
<div ng-hide="showme2" class="right-sidebar sidebar">
<h2>Right sidebar</h2>
<hr/><hr/>
<center><button ng-click="showme2=true" >Collapse</button></center>
<hr/><hr/>
</div>
</div>
CSS
.container {
width: 100%;
background: grey;
height: 200px;
}
.container div {
height: inherit;
display: inline;
}
nav {
background: black;
height: 50px;
}
nav h2 {
text-align: center;
color: white;
line-height: 50px;
}
.sidebar {
background: blue;
width: 200px;
}
.sidebar h2 {
color: white;
text-align: center;
}
.sidebar hr {
margin-top: 25px;
width: 150px;
}
.left-sidebar {
float: left;
}
.right-sidebar {
float: right;
}
.main-content {
width: calc(100% - 400px);
background: red;
float: left;
}
.main-content h1 {
text-align: center;
}
table {
margin: 0 auto;
}
table,
thead,
th {
background: white;
}
table tbody,
tbody,
td {
background: grey;
}