Calc() alternative to fixed side bar with content?

Question

I have a fixed side bar on the left and a right content area. Is there an alternative to calculating the content width other than calc()? I wanted a more browser safe meth

Answer 1

I have already done a similar example, which I would like to share. You need to use positioning for this case. This is a case of fixed-fluid:

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

Or

+-------+-----------+
| FIXED | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

Fixed-Fluid Model. In my snippet, I have demonstrated two kinds of examples. In the first case, the fluid is less in size. And the next has too long content.

Snippet

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid</div>
</div>

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>

For a better fixed fluid, I have done with the same kind for you:

.main-content {border: 1px solid #999; padding: 5px; position: relative; min-height: 200px; padding-left: 125px;}
.left-sidebar {position: absolute; left: 0; top: 0px; width: 120px; background-color: #eee; height: 100%;}

<div class="main-content">
  <div class="left-sidebar"></div>
  <div class="right-fluid">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum libero iure facere quam iste, nostrum laborum in, dolorum beatae optio rem explicabo voluptates qui quos eius accusamus! Accusamus blanditiis, et!
  </div>
</div>