How should I implement bootstrap responsive with both fixed and percentage based layout?

Question

+-----------+----------------------------------+
|           |                                  |
|           |                                  |
|216px fixed|  percentage based layout here    |
|           |                                  |
|           |                                  |
|           |                                  |
|           |                                  |
|           |                                  |
+-----------+----------------------------------+

How could I use this?

<div id="left" class="span"></div>
<div id="right" class"span12"></div><!--or if span9--- that wouldn't fit exactly-->

Answer 1

Here is a css solution:

.wrapper
{
    min-height:100%;
    width:100%;
    position:relative;
    background-color:Black;
    display:inline-block;
}
.sidebar
{
    width:216px;
    top:0px;
    left:0px;
    bottom:0px;
    position:absolute;
    background-color:Aqua;
}
.content
{
    width:calc(100% - 216px);
    position:relative;
    background-color:Gray;
    float:right;
}

I make an update on a fiddle with a solution:

<div class="wrapper">
<div class="sidebar hidden-phone">
</div>
<div class="content">

It will work according to the content
    <br/>It will work according to the content
    <br/>
</div>

http://jsfiddle.net/DppA8/20/

You can read more on alternative for more compatibilities:

css width: calc(100% -100px); alternative using jquery

Best regards,