HTML CSS examples for CSS Widget:UL Alignment
Aligning multiple div boxes horizontally
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> *, *:before,<!-- w w w . java 2s. c om--> *:after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; padding:0; margin:0; font-family:verdana; } .cust-table { display:table; padding:0; width:100%; } .cust-tr { display:table-row: } .cust-td { border-collapse:collapse; display:table-cell; vertical-align:top; background:pink; border:2px solid Chartreuse; min-width:100px; } </style> </head> <body> <div class="cust-table"> <div class="cust-tr"> <div class="cust-td"> <!-- Column 1, example widget code below --> <div class="info-box"> <span class="info-box-icon bg-aqua"> <i class="fa fa-envelope-o"></i> </span> <div class="info-box-content"> <span class="info-box-text">Messages</span> <span class="info-box-number">1,410</span> </div> </div> </div> <div class="cust-td"> <p>test test test test test!</p> </div> <div class="cust-td"> <p>test test test teset teset test test test test test</p> </div> <div class="cust-td"> <p>test test test test test test test test test test test test test</p> </div> </div> </div> </body> </html>