How to Have Responsive Div's That Get Wider as the Navbar Closes

Question

So I am working on a portal and I found a good calendar to throw into my web page. Right now, the css has it set up so that the first div has the attribute "left:250px" and then the "width:200px" and then my second div is set to "left:450". The problem is when I close my side navbar the divs stay stationary. I want them to be responsive and slide over the area where the navbar once was but I haven't figured out how to do that. I've tried using but it wasn't seeming to work very well. Below are pictures of my problems for you guys to see,

Before:

After:

Here is my code, both the css and html. A lot of html, js and css has been left out but I think the code I linked is where the problem is going wrong. If you think the problem might be elsewhere please let me know and I can link it. Thanks for the help friends!!

 #lnb { position: absolute; left: 250px; width: 200px; top: 49px; bottom: 0; border-right: 1px solid #d5d5d5; padding: 14px 10px; background: #fafafa; } #right { position: absolute; left: 450px; top: 49px; right: 0; bottom: 0; } 

 <div id="lnb"> <div class="lnb-new-schedule"> <button id="btn-new-schedule" type="button" class="btn btn-secondary btn-block " data-toggle="modal"> New schedule</button> </div> <div id="lnb-calendars" class="lnb-calendars"> <div> <div class="lnb-calendars-item"> <label> <input class="tui-full-calendar-checkbox-square" type="checkbox" value="all" checked> <span></span> <strong>View all</strong> </label> </div> </div> <div id="calendarList" class="lnb-calendars-d1"> </div> </div> <div class="lnb-footer"> © Noblis ESI </div> </div> <div id="right"> <div id="menu"> <span class="dropdown"> <button id="dropdownMenu-calendarType" class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i id="calendarTypeIcon" class="calendar-icon ic_view_month" style="margin-right: 4px;"></i> <span id="calendarTypeName">Dropdown</span>&nbsp; <i class="calendar-icon tui-full-calendar-dropdown-arrow"> </i> </button> <ul class="dropdown-menu" role="menu" aria- labelledby="dropdownMenu-calendarType"> <li role="presentation"> <a class="dropdown-menu-title" role="menuitem" data- action="toggle-daily"> <i class="calendar-icon ic_view_day"></i>Daily </a> </li> <li role="presentation"> <a class="dropdown-menu-title" role="menuitem" data- action="toggle-weekly"> <i class="calendar-icon ic_view_week"></i>Weekly </a> </li> <li role="presentation"> <a class="dropdown-menu-title" role="menuitem" data- action="toggle-monthly"> <i class="calendar-icon ic_view_month"></i>Month </a> </li> <li role="presentation"> <a class="dropdown-menu-title" role="menuitem" data- action="toggle-weeks2"> <i class="calendar-icon ic_view_week"></i>2 weeks </a> </li> <li role="presentation"> <a class="dropdown-menu-title" role="menuitem" data- action="toggle-weeks3"> <i class="calendar-icon ic_view_week"></i>3 weeks </a> </li> <li role="presentation" class="dropdown-divider"></li> <li role="presentation"> <a role="menuitem" data-action="toggle-workweek"> <input type="checkbox" class="tui-full-calendar- checkbox-square" value="toggle-workweek" checked> <span class="checkbox-title"></span>Show weekends </a> </li> <li role="presentation"> <a role="menuitem" data-action="toggle-start-day-1"> <input type="checkbox" class="tui-full-calendar- checkbox-square" value="toggle-start-day-1"> <span class="checkbox-title"></span>Start Week on Monday </a> </li> <li role="presentation"> <a role="menuitem" data-action="toggle-narrow-weekend"> <input type="checkbox" class="tui-full-calendar- checkbox-square" value="toggle-narrow-weekend"> <span class="checkbox-title"></span>Narrower than weekdays </a> </li> </ul> </span> <span id="menu-navi"> <button type="button" class="btn btn-default btn-sm move-today" data-action="move-today">Today</button> <button type="button" class="btn btn-default btn-sm move-day" data-action="move-prev"> <i class="calendar-icon ic-arrow-line-left" data- action="move-prev"></i> </button> <button type="button" class="btn btn-default btn-sm move-day" data-action="move-next"> <i class="calendar-icon ic-arrow-line-right" data- action="move-next"></i> </button> </span> <span id="renderRange" class="render-range"></span> </div> <div id="calendar"></div> </div> 

Answer 1

#lnb {
 position: absolute;
 left: 250px;
 width: 200px;
 top: 49px;  
 bottom: 0;
 border-right: 1px solid #d5d5d5;
 padding: 14px 10px;
 background: #fafafa;
}

#right {
 position: absolute;
 left: 450px;
 top: 49px;
 right: 0;
 bottom: 0;
} 

Here's how the logic has been defined in the CSS:

Nav bar's left padding + Nav bar's width = Table's left padding

And since the table has its position set to absolute, it stays there despite the nav bar shortening it.

I'm not exactly sure what would fix this issue, but here's a couple of things you can try:

• Set the position of the table to relative. This way it will always be positioned next to its previous sibling. Also set the table's width to 100%
• If setting the table's position to relative breaks the order of elements on the page, then use JavaScript to detect the Nav bar shortening and add a class name to the table that changes it left property to 0px and width to 100%. Something like table.nav-shortened{left: 0; width: 100%}