Two columns layout IE7+

by Ivan Gerasimenko

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<div class="two-column-box container">
    <div class="row">
         <h4>Why col-lg-3's class width 25% is not implemented???</h4>
    </div>
    <div class="row">
        <div class="col-left col-lg-4">
            Some text in LEFT column. Some text in LEFT column. 
            Some text in LEFT column.
        </div>
        <div class="col-right col-mg-4 col-lg-7">
            Some text in RIGHT column. Some text in RIGHT column. 
            Some text in RIGHT column. Some text in RIGHT column. 
            Some text in RIGHT column.
        </div>
    </div>
    <div class="row">
        <div class="col-left col-lg-3">
            Some text in LEFT column. Some text in LEFT column. 
            Some text in LEFT column.
        </div>
        <div class="col-right col-mg-3 col-lg-6">
            Some text in RIGHT column. Some text in RIGHT column. 
            Some text in RIGHT column. Some text in RIGHT column. 
            Some text in RIGHT column.
        </div>
    </div>
    <div class="row">
        <div class="col-left col-lg-5">
            Some text in LEFT column. Some text in LEFT column. 
            Some text in LEFT column.
        </div>
        <div class="col-right col-mg-5 col-lg-7">
            Some text in RIGHT column. Some text in RIGHT column. 
            Some text in RIGHT column. Some text in RIGHT column. 
            Some text in RIGHT column.
        </div>
    </div>
</div>

CSS

.two-column-box > .row {
    clear: both;
    width: 500px;
    margin: 0px;
    text-align: justify;
}
.two-column-box .col-left {
    float: left;
}
.two-column-box .col-right {
}
.col-mg-3 {
    margin-left: 25%;
}
.col-mg-4 {
    margin-left: 33.33%;
}
.col-mg-5 {
    margin-left: 41.66%;
}
/*.col-mg- { margin-left: %; }*/


  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }