html - A CSS table in one of parallel divs -
on webpage have container div , inside 2 divs next each other. in first inner div trying set css table has 4 columns evenly fill div.
the problem having cells seem width relative page's width, not table/it's parent div. if decrease width 25% lower, fit, if scale page, still wrap, div on right hits rightmost table cell.
how should setup layout keep them inside div?
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> html,body, div { display: block; height: 100%; width: 100%; } #container { position: absolute; height: 300px; width: 100%; } .sidebyside { position: absolute; float: left; height: 100%; } #galleria { background-color:#0c0; left: 0px; right: 300px; width: auto; } #tagit { background-color: #099; right: 0px; width: 300px; } #table { position: absolute; margin: 0px; padding: 0px; display: table; height: 100%; width: 100%; } .table-row { position: relative; margin: 0px; padding: 0px; display: table-row; width: 100%; height: 25%; } .table-cell { position: relative; margin: 0px; padding: 0px; display: table-cell; float: left; height: 100%; width: 25%; padding: 20px; } .kuva { position: relative; margin: 0px; padding: 0px; width: 100%; height: 100%; 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">cell1</div> </div> <div class="table-cell"> <div class="kuva">cell2</div> </div> <div class="table-cell"> <div class="kuva">cell3</div> </div> <div class="table-cell"> <div class="kuva">cell4</div> </div> </div> </div> </div> </div> </body> </html>
remove
float: left; from
.table-cell 
Comments
Post a Comment