CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Vishal
Vishal

Reputation: 2336

bootstrap row with fixed width columns on left and right sides

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.

enter image description here

Upvotes: 1

Views: 4719

Answers (3)

Vishal
Vishal

Reputation: 2336

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.

Upvotes: -1

patelarpan
patelarpan

Reputation: 8011

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>

Upvotes: 1

Zuber
Zuber

Reputation: 3473

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

Upvotes: 1

Related Questions