Introducing PocketGrid, a compact CSS grid designed for responsive layouts.
Following Luca's recommendation, PocketGrid can be utilized to structure your layout.
A demonstration has been prepared for you on JSFiddle: http://jsfiddle.net/arleray/5Mvph/
The HTML code is straightforward:
<div id="LAYOUT" class="block-group">
<div id="HEADER" class="block">
<div class="box">HEADER</div>
</div>
<div id="WORK_AREA" class="block-group">
<div id="LEFT_BAR" class="block">
<div class="box">LEFT_BAR</div>
</div>
<div id="CONTENT" class="block">
<div class="box">CONTENT</div>
</div>
</div>
<div id="TOOLBOX" class="block-group">
<div class="TOOLBOX_ITEM block">
<div class="box">TOOLBOX ITEM</div>
</div>
<div class="TOOLBOX_ITEM block">
<div class="box">TOOLBOX ITEM</div>
</div>
<div class="TOOLBOX_ITEM block">
<div class="box">TOOLBOX ITEM</div>
</div>
</div>
</div>
To style your CSS effectively, I recommend employing the "mobile-first" approach:
1 - Begin with the "mobile" version (the smallest):
#LAYOUT { min-width: 800px; }
#HEADER { height: 30px; }
#WORK_AREA { width: 100%; }
#LEFT_BAR { width: 300px; }
#CONTENT {
overflow: hidden; /* Trick to fill the remaining space */
float: none;
width: auto;
}
#TOOLBOX {
min-width: 300px;
width: 100%;
}
2 - Subsequently, incorporate media queries for larger versions (> 1100px) to implement changes from the mobile version only:
@media (min-width: 1100px) {
#WORK_AREA { width: calc(100% - 300px); }
#TOOLBOX { width: 300px; }
}
To achieve a fluid content width within the WORK_AREA, the "overflow:hidden" technique was utilized to occupy the remaining space after the LEFT_BAR.
However, due to the fixed toolbar on the right, the calc() function was necessary to compute the WORK_AREA width.
Note: The calc() function may have compatibility issues limited to Android 4.4+. For more details, refer to this link: http://caniuse.com/calc. It remains the optimal method (pure CSS-wise) for ensuring a fluid WORK_AREA next to the fixed sidebar, despite TOOLBOX being declared post-WORK_AREA.
Should you desire an alternative to the calc() function using the "overflow:hidden" trick, ensure the toolbox precedes the WORK_AREA, as demonstrated in this alternate JSFiddle: http://jsfiddle.net/arleray/5Mvph/11/
For additional insights on PocketGrid, explore various examples available here:
Trust this information proves beneficial!