Common Techniques for aligning DIVs horizontally

1. Floating

     <div class="floatleft">LEFT</div>
     <div class="floatright">RIGHT</div>
     <div class="clearboth"></div>
    .floatleft{ float:left; }
    .floatright{ float:right; }
    .clearboth{ clear:both; }

2. Inline-Block

     <div class="item">LEFT</div>
     <div class="item">RIGHT</div>
    .item{ display:inline-block; }

3. Using Bootstrap

     <div class="row">
         <div class="md-col-6">Left</div>
         <div class="md-col-6">Right</div>
     </div>

4. Foundation

     <div class="row">
         <div class="medium-6 columns">Left</div>
         <div class="medium-6 columns">Right</div>
     </div>

5. Using Display:Tables

     <div style="display:table-row">
         <div style="display:table-cell">Left</div>
         <div style="display:table-cell">Right</div>
     </div>

If you know other techniques let the kids know.

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *