The interesting question here is: what exactly do you mean by “fixed”?
If “fixed” means firmly attached to a fixed position, covering the left and right margins at any time, 100% of the height, while the content flows in a 10 wide column in the middle, here is what you can do (but the Semantic UI grid is not suitable for this purpose):
<style>
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#site-tree {
background-color: #e0e0e0;
position: fixed;
top: 0px;
height: 100%;
overflow: hidden;
left: 0px;
width: 18%;
padding: 1em;
}
#toc {
background-color: #e0e0e0;
position: fixed;
top: 0px;
height: 100%;
overflow: hidden;
right: 0px;
width: 18%;
padding: 1em;
}
#page-content {
background: #f0f0ff;
margin-left: 18%;
width: 64%;
padding: 1em 2em 1em 2em;
}
and the HTML is simply three divs:
<div id="site-tree">
<h2>Site Tree</h2>
<p> Tree... </p>
</div>
<div id="toc">
<h2>Stuff</h2>
<p> More stuff... </p>
</div>
<div id="page-content">
Lorem ipsum dolor sit...
</div>
With the proper media queries, you could make that responsive, so a mobile would maybe have the navigation tree as something flipping in from the left or right, while the toc is omitted or displayed on top.
Cheers,
–j.