bootstrap row with fixed width columns on left and right sides - html

Question

What does my css for fixed-left, fixed-right and content have to be such that the left and right divs are fixed, the content div is max width less the width of the two fixed width div and that the divs don't roll one under the other even if the width of the screen is less than (fixed-left.width + fixed-right.width)?
<div class="row" id="row01">
<div class="fixed-left">
<div class="fixed-left-a">001</div>
<div class="fixed-left-b">Item 1</div>
</div>
<div class="content">
<div class="row">
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
</div>
</div>
<div class="fixed-right">
<span>A</span>
</div>
</div>
<div class="row" id="row02">
...
</div>
I want to use bootstrap 3 grid within the main content, but have fixed attributes of every row that don't require the left and right pieces to be variable sized.
Edit:
I want the output to look something like the attached image.

Answer 1

You can use calc to set the width of the content
.fixed-left, .fixed-right {
position: fixed;
width: 100px;
top: 0;
bottom: 0;
}
.fixed-left {
left: 0;
background: yellow;
}
.fixed-right {
right: 0;
background: purple;
}
.content {
background: pink;
width: calc(100% - 200px);
margin: 0 auto;
height: 100vh;
}
<div class="row" id="row01">
<div class="fixed-left">
<div class="fixed-left-a">001</div>
<div class="fixed-left-b">Item 1</div>
</div>
<div class="content">
<div class="row">
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
</div>
</div>
<div class="fixed-right">
<span>A</span>
</div>
</div>
see the snippet in full-page and try to resize the browser window

Answer 2

you set margin to content margin: 0 100px; like this.
Here 100px is your fixed element width.
* {
margin: 0;
padding:0;
box-sizing:border-box;
}
.fixed-left, .fixed-right {
position: fixed;
width: 100px;
top: 0;
bottom: 0;
}
.fixed-left {
left: 0;
background: yellow;
}
.fixed-right {
right: 0;
background: purple;
}
.content {
background: pink;
width: 100%;
margin: 0 100px;
height: 100vh;
}
<div class="row" id="row01">
<div class="fixed-left">
<div class="fixed-left-a">001</div>
<div class="fixed-left-b">Item 1</div>
</div>
<div class="content">
<div class="row">
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
</div>
</div>
<div class="fixed-right">
<span>A</span>
</div>
</div>

Answer 3

https://stackoverflow.com/a/29532261/2193381 offers a very simple solution that appears to work. It is not the approach I had in mind, and may have unintended effects, but is interesting nonetheless.
In short, pull-left and pull-right the fixed width divs before the central floating width div is set.