Create a fixed and fluid width two column layout

In order to create a page which will have a fixed side bar and a fluid width container, we need to follow the below mentioned HTML/CSS pattern.

HTML

<div id="container" class="clearfix">
<div class="sidebar">

</div>

<div class="mainarea">

</div>
</div>

CSS

#mainarea {

        overflow: hidden;

}

.clearfix::before, .clearfix::after {

             content: ' 0020';

             display: block;

             overflow: hidden;

             visibility: hidden;

             width: 0;

             height: 0;

}

.clearfix {

1. zoom: 1;

}

.clearfix::before, .clearfix::after {

             content: ' 0020';

        display: block;

             overflow: hidden;

             visibility: hidden;

             width: 0;

             height: 0;

}

.customizer {

1. width: 265px;
2. float: left;
3. background: #444;
4. margin-right: -100%;
5. color: #F7F7F7;
6. position: relative;
7. z-index: 2;
8. padding-bottom: 1000px;
9. margin-bottom: -1000px;

}

.preview_area {

1. width: 100%;
2. float: left;
3. background: white;
4. padding-bottom: 1000px;
5. margin-bottom: -1000px;

}