Layout problem with the grid inside <div>

Hello,

I have the following problem with the grid layout.
The page in which is displayed the grid is form from multiple nested divs ( as you can see bellow)

...
<div class="workspace">
    <div class="workspaceTitle">
        
    </div>
    <form name="frmTest" method="POST" action="test.htm?view=testView&mnuId=1">
        <div class="workarea">
            
            <input type="hidden" name="operation" value="search">
            <input type="hidden" name="view" value="testValue">
            <div class= "form">
                <label>Field</label> 
                <input type="text" name="criteria" id="criteria" size="30"/>
                <input type="submit" name="btnSearch" id="btnSearch" value="Search" />
            </div>
            <div class="gridContainer">
                <comp:grid model="testGrid"/>
            </div>
            
        </div>
    </form>
</div>
...  The problem is that the grid div (gridContainer class) is overlapping the bottom part of the parent div (workarea class).

Anyone knows haw to solve this problem without using table ?

Regards,

Can you make it fixed size or you need it resizable?

Hi Alex,

I need it to be resizable (depending on the browser window).

P.S. Sorry for the typos from my previous post :)

Thanks