HTML CSS examples for CSS Widget:Table Width
Make display:table fill out horizontal space without setting width
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .float { width:100px; border:2px solid Chartreuse; display:table-cell; } .enclose1 {<!--from ww w . j a va2 s.c om--> height:100%; display:table; background-color:yellow; } body, html { width:100%; height:100%; } .enclose2 { height:100%; background-color:blue; display:table; } </style> </head> <body> <div class="enclose2"> <div class="enclose1"> <div class="float"> Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem i <br> </div> <div class="float"> Lorem i </div> <div class="float"> Lorem i </div> </div> </div> </body> </html>