bootstrap row with fixed width columns on left and right sides

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.

do the two fixed divs have a fixed width or is it variable ? — Neil, May 11 '18 at 13:52
then padding + box-sizing:border-box (my comment in patelarpan answer) is the way to go, i would not suggest calc, it's not that pretty and i don't really know for compatibility — Neil, May 11 '18 at 14:05

score 1 · Answer 1 · answered May 11 '18 at 13:53

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

patelarpan · Answer 2 · 2018-05-11T15:06:33.397

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>

please note that the content div now have a wrong width (100% + margins) you must use padding instead with box-sizing:border-box — Neil, May 11 '18 at 14:08

score -1 · Accepted Answer · answered May 12 '18 at 05:22

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.

bootstrap row with fixed width columns on left and right sides

3 Answers3