layout - CSS table height of rows not even -
i trying create 4x4 array of content using css tables. cells should evenly sized. got fix problem cells going out of parent div. broke height of cells.
what wrong here? rows should 25% of container, cells inheriting that. seems happen first row grows as can, , 3 remaining ones scale according content... why?
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> html,body { display: block; height: 100%; width: 100%; } div { display: block; } #container { background-color: #ccf; position: absolute; height: 100%; width: 100%; } .sidebyside { position: absolute; float: left; top: 0px; height: 100%; } #galleria { background-color:#0c0; left: 0px; right: 300px; width: auto; } #tagit { background-color: #099; right: 0px; width: 300px; } #table { position: absolute; display: table; height: 100%; width: 100%; } .table-row { position: relative; display: table-row; width: 100%; height: 25%; } .table-cell { position: relative; display: table-cell; height: 100%; width: 20%; padding: 20px; } .kuva { position: relative; width: 100%; height: 100%; margin: 10px; background-color: #999; } </style> </head> <body> <div id="container"> <div id="galleria" class="sidebyside"> <div id="table"> <div class="table-row"> <div class="table-cell"> <div class="kuva"> kuva1 </div> </div> <div class="table-cell"> <div class="kuva"> kuva2 </div> </div> <div class="table-cell"> <div class="kuva"> kuva3 </div> </div> <div class="table-cell"> <div class="kuva"> kuva4 </div> </div> </div> <div class="table-row"> <div class="table-cell"> <div class="kuva"> kuva1 </div> </div> <div class="table-cell"> <div class="kuva"> kuva2 </div> </div> <div class="table-cell"> <div class="kuva"> kuva3 </div> </div> <div class="table-cell"> <div class="kuva"> kuva4 </div> </div> </div> <div class="table-row"> <div class="table-cell"> <div class="kuva"> text </div> </div> <div class="table-cell"> <div class="kuva"> </div> </div> <div class="table-cell"> <div class="kuva"> </div> </div> <div class="table-cell"> <div class="kuva"> </div> </div> </div> <div class="table-row"> <div class="table-cell"> <div class="kuva"> test </div> </div> <div class="table-cell"> <div class="kuva"> </div> </div> <div class="table-cell"> <div class="kuva"> </div> </div> <div class="table-cell"> <div class="kuva"> </div> </div> </div> </div> </div> <div id="tagit" class="sidebyside">.</div> </div> </body> </html>
just keeping in flow , dispatching display table/table-row/table-cell different levels can : http://codepen.io/anon/pen/pvdwk
to rid of scrollbar when table can feet window not forget add body{margin:0;}
Comments
Post a Comment