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
Post a Comment