Question

The question seems to be simple but I am not getting it done.

I have a web project I am working on with body’s overflow set to hidden. So I cannot put contents in the page with more than the height of the available space or else they will be hidden.

Now I have four graphs/charts to show on a page each taking equal space. I have tried to put each in a table of 2 rows and 2 columns. But no matter what you try, table’s height always overflows the page height and the contents become hidden. I could though control the width of the cells by giving each 50% width and setting table-layout: fixed;

How can I implement it? Using div or using table? Please help me create div or table cells with exactly the same size in height and width; and not overflow the page height.

Answer 1

SOLUTION – adjust to your own need.

<style type="text/css">
    #container {
        height:200px;
        width:400px;
        overflow:hidden;
        border:1px solid #000;
    }
    .item {
        float:left;
        height:100px;
        width:50%
    }
    .item-a { background-color: #CCC; }
    .item-b { background-color: #AAA; }
    .item-c { background-color: #900; }
    .item-d { background-color: #9CC; }
    .clear {
        clear:left;
    }
</style>

<div id="container">
    <div class="item item-a">abc</div>
    <div class="item item-b">abc</div>
    <div class="item item-c">abc</div>
    <div class="item item-d">abc</div>
    <div class="clear"></div>
</div>

here is the equivalent table method with the same CSS as the div method

<div id="container">
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td class="item item-a">a</td>
            <td class="item item-b">b</td>
        </tr>
        <tr>
            <td class="item item-c">c</td>
            <td class="item item-d">d</td>
        </tr>
    </table>
</div>