Nov 5, 2012

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 {
        overflowhidden;
}

.clearfix::before, .clearfix::after {
             content' 0020';
             displayblock;
             overflowhidden;
             visibilityhidden;
             width0;
             height0;
}
.clearfix {
  1. zoom1;
}
.clearfix::before, .clearfix::after {
             content' 0020';
        displayblock;
             overflowhidden;
             visibilityhidden;
             width0;
             height0;
}

.customizer {
  1. width265px;
  2. floatleft;
  3. background#444;
  4. margin-right-100%;
  5. color#F7F7F7;
  6. positionrelative;
  7. z-index2;
  8. padding-bottom1000px;
  9. margin-bottom-1000px;
}

.preview_area {
  1. width100%;
  2. floatleft;
  3. backgroundwhite;
  4. padding-bottom1000px;
  5. margin-bottom-1000px;
}

No comments:

Post a Comment

Test post after a long time

i want to see the post