0

Is it possible to have 2 fixed width sidebars with a fluid centered content area using bootstrap

Please take a look at the screenshot link and you can check the code I've tried.

<div class="container-fluid full-height no-padding">
<div class="row full-height no-margin">
    <div class="jumbotron" data-pages="parallax">
        <div class="container-fluid">
            <ul class="breadcrumb">
            </ul>
        </div>
    </div>
    <div class="col-sm-9 no-padding full-height">
        <div class="col-sm-2" id="resizable">
            <div class="" id="default-tree">
                <ul class="full-height" id="treeData" style="display: none;">
                </ul>
            </div>
        </div>
        <div class="col-sm-10 full-height">
            <div class="row files-row">
                <div class="col-xs-2 file-thumbnail">
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/300x150" alt="...">
                        <label class="center-block">File name</label>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3 no-padding full-height">
        <div class="bg-white full-height"></div>
    </div>
</div>

Layout screenshot

Siguza
  • 21,155
  • 6
  • 52
  • 89
mohasafra
  • 23
  • 4

1 Answers1

0

You can check with the below link.

http://jsfiddle.net/DUR6d/

  *
{
    margin:0;padding:0;
}
html,body
{
    width: 100%;
    height: 100%;
    background: #fff;
}
.main
{
    box-sizing:border-box;   

}
#leftSidebar {
    width: 80px;
    position: fixed;
    float:left;
    top: 0px;
    bottom: 0px;
    left: 0px;
    margin: 4px;
    box-sizing:border-box;
    background-color: gray;
}
#middle {   
    height: 100%;
    margin-left:88px;
    box-sizing:border-box;
}

#rightSidebar {
    position: fixed;
    top:0;
    right:0;
    height:100%;
    margin: 4px;
    box-sizing: border-box;
    background-color: gray;
}
#middle, #rightSidebar
{
    width: calc(50% - 40px);
}
article {
    width: 97%;
    height: 80px;
    margin: 4px 0;

    background-color: #ccc;
}
Steevan
  • 826
  • 5
  • 8