html - Stacking divs side by side -


i'm trying stack these divs side side - left , right. right stack of divs won't clear. should float left stack left , same right stack or left , right floats?

i'm trying emulate this, i'm trying make table divs. http://www.weareint.io/

demo https://jsfiddle.net/zeegn9cn/

 * {     padding: 0px;     margin: 0px;   }   #sections {     /*--left section columns--*/     width: 1000px;     height: 400px;     margin: 0 auto;     background: red;   }   .sectionlfirst {     width: 500px;     background: orange;   }   .sectionlsecond {     width: 500px;     background: skyblue;   }   .sectionlthird {     width: 500px;     background: indigo;     clear: both;   }   .sectionrfirst {     /*--right section columns--*/     float: right;     width: 500px;     background: orange;     clear: both;   }   .sectionrsecond {     float: right;     width: 500px;     background: skyblue;     clear: both;   }   .sectionrthird {     float: right;     width: 500px;     background: indigo;     clear: both;   }
<!--left section columns-->  <div id="sections">    <div class="sectionlfirst">      <h3>fdkfjdkfj</h3>      <p>fdlfkdlkfldkfdlkfdl</p>    </div>    <div class="sectionlsecond">      <h3>fdkfjdkfj</h3>      <p>fdlfkdlkfldkfdlkfdl</p>    </div>    <div class="sectionlthird">      <h3>fdkfjdkfj</h3>      <p>fdlfkdlkfldkfdlkfdl</p>    </div>      <!--left section columns-->    <div class="clearfix"></div>    <div class="sectionrfirst">      <h3>1fdkfjdkfj</h3>      <p>fdlfkdlkfldkfdlkfdl</p>    </div>    <div class="sectionrsecond">      <h3>2fdkfjdkfj</h3>      <p>fdlfkdlkfldkfdlkfdl</p>    </div>    <div class="sectionrthird">      <h3>3fdkfjdkfj</h3>      <p>fdlfkdlkfldkfdlkfdl</p>    </div>    </div>

you wrap them in divs , float them this:

*{    padding:0px;    margin:0px;  }  #sections{   /*--left section columns--*/    width:1000px;    height:400px;    margin:0 auto;    background:red;  }  .sectionlfirst{    width:500px;    background:orange;  }  .sectionlsecond{    width:500px;    background:skyblue;  }  .sectionlthird{    width:500px;    background:indigo;    clear:both;  }      .sectionrfirst{  /*--right section columns--*/    float:right;     width:500px;    background:orange;    clear:both;  }  .sectionrsecond{    float:right;    width:500px;    background:skyblue;    clear:both;      }  .sectionrthird{    float:right;    width:500px;    background:indigo;    clear:both;  }  .left {      float: left;      }  .right {      float: right;  }
<!--left section columns-->   <div id="sections">      <div class="left">          <div class="sectionlfirst">              <h3>fdkfjdkfj</h3>              <p>fdlfkdlkfldkfdlkfdl</p>          </div>          <div class="sectionlsecond">              <h3>fdkfjdkfj</h3>              <p>fdlfkdlkfldkfdlkfdl</p>          </div>          <div class="sectionlthird">              <h3>fdkfjdkfj</h3>              <p>fdlfkdlkfldkfdlkfdl</p>          </div>      </div>      <!--left section columns-->       <div class="clearfix"></div>      <div class="right">          <div class="sectionrfirst">              <h3>1fdkfjdkfj</h3>              <p>fdlfkdlkfldkfdlkfdl</p>          </div>          <div class="sectionrsecond">              <h3>2fdkfjdkfj</h3>              <p>fdlfkdlkfldkfdlkfdl</p>          </div>          <div class="sectionrthird">              <h3>3fdkfjdkfj</h3>              <p>fdlfkdlkfldkfdlkfdl</p>          </div>      </div>        </div>


Comments

Popular posts from this blog

php - Zend Framework / Skeleton-Application / Composer install issue -

c# - Better 64-bit byte array hash -

python - PyCharm Type error Message -