HTML CSS examples for CSS Widget:Table Cell
Relative-positioned Table-cell to Serve as Parent
<html> <head> <title>Lorem ipsum dolor sit amet, consectetur ad</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!--from w ww .j a v a 2 s .co m--> margin:0; padding:0; } .container { position:relative; margin:11% auto; width:97%; max-width:401px; background:mistyrose; border:2px solid Chartreuse; } .container p { font-family:Arial; font-size:0.9em; padding:0 11%; } .table { display:table; width:100%; border-spacing:11px; } .table>li { position:relative; display:table-cell; height:100px; background:plum; } .table.firefox>li>div { position:relative; } .icon { position:absolute; top:0; left:0; width:21px; height:21px; background:purple; } </style> </head> <body> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipi</p> <ul class="table firefox"> <!--=> Notice the wrapper <div>! </!--> <li> <div> <div class="icon"></div> </div> </li> <li> <div> <div class="icon"></div> </div> </li> <li> <div> <div class="icon"></div> </div> </li> <li> <div> <div class="icon"></div> </div> </li> </ul> </div> </body> </html>