3.2.0

Basic Page Layout with div and table for tabs and grid

I was trying to do what I thought would be very simple, and it probably is, but maybe my approach is entirely wrong (having looked at so many different examples) and I would like some direction if possible. I have looked at all of the samples and have searched this forum but I have had no luck in finding an answer. My apologies if there is one out there and I have missed it.

I have 4 div's on a page. In the third div I want to have tabs and a grid within a table cell. I want the tabs and the grid to move with the div and table as the other divs around it grow, shrink, and hide. I have accomplished that as follows...

<div id="divSomeGrid" style="z-index: 1; display: block; background-color: #CCFF00; width: 100%; overflow: auto;">
  <table cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
    <tr>
      <td width="100%">
        <script>
          document.write(oDisplayTabs);
          document.write(oDisplayFrame);
          document.write(oMainGrid);
        </script>
      </td>
    </tr>
  </table>
</div> <!-- END divSomeGrid -->


The objects are defined as follows:

var oDisplayTabs = new AW.UI.Tabs;
var oDisplayFrame = new AW.HTML.DIV;
var oMainGrid = new AW.Grid.Extended;

My problem is this, depending on how I define my styles the tabs either appear at the top of my page, on top of my other div's, or if I remove the position:absolute and get the objects to stay within the table they are lined up (stacked) on the page one below the other (i.e. first the tabs, then the frame, then the grid).

Should I not be using the AW.HTML.DIV? Are there other examples of tabs I can look at? I realize that this might be a very basic question compared to the inner workings of the grid (I haven't even gotten there yet), but some of the basic page layout principles with these controls evades me.

My apologies, and thanks in advance,
Jack Yo
April 22,
OK, I feel kind of dumb, but I'm learning. Here is what I did...

<td width="100%" valign="top">
    <script>
        document.write(oCollectionDisplayTabs);
    </script>
        <div style="border: 1px solid #91A7B4; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #FCFCFE;">
            <script>
                document.write(oMainCoinGrid);
            </script>
        </div>
</td>


...and it seems to work. I'm not sure how I would have done it with the var oDisplayFrame = new AW.HTML.DIV;.

Anyway, I'm on my way.

Thanks,
Jack Yo
April 22,

This topic is archived.

See also:


Back to support forum