100% Width Inside of DIV

I am running the following script and I have one issue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

    <title>ActiveWidgets Grid :: Examples</title>

    <style>body {font: 12px Tahoma}</style>



    <!-- ActiveWidgets stylesheet and scripts -->

    <link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>

    <script src="../../runtime/lib/aw.js"></script>



    <!-- grid format -->

    <style>

        #myGrid .aw-row-selector {text-align: center}



        #myGrid .aw-column-0 {width:  80px;}

        #myGrid .aw-column-1 {width: 200px;}

        #myGrid .aw-column-2 {text-align: right;}

        #myGrid .aw-column-3 {text-align: right;}

        #myGrid .aw-column-4 {text-align: right;}



        #myGrid .aw-grid-cell {border-right: 1px solid threedlightshadow;}

        #myGrid .aw-grid-row {border-bottom: 1px solid threedlightshadow;}

    </style>



    <!-- grid data -->

    <script>

        var myData = [

            ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],

            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],

            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],

            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],

            ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],

            ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],

            ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],

            ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],

            ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],

            ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],

            ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],

            ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],

            ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],

            ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],

            ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],

            ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],

            ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],

            ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],

            ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],

            ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]

        ];



        var myColumns = [

            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"

        ];

    </script>

</head>

<body>



    <!--- set location of grid --->

    <div id="myGridContainer" style="position: relative; width: 600px; height: 200px; overflow: hidden;">

        <div id="myGrid"></div>

        <div id="myGridCover" style="position: absolute; display: block; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #00FF33; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50);">&nbsp;</div>

    </div>



    <script>



    //	create ActiveWidgets Grid javascript object

    var obj = new AW.UI.Grid;

    obj.setId("myGrid");

    obj.setStyle('width', '592px'); 

    obj.setStyle('height', '196px'); 

    obj.setStyle('position', 'relative'); 



    //	define data formats

    var str = new AW.Formats.String;

    var num = new AW.Formats.Number;



    obj.setCellFormat([str, str, num, num, num]);



    //	provide cells and headers text

    obj.setCellText(myData);

    obj.setHeaderText(myColumns);



    //	set number of rows/columns

    obj.setRowCount(20);

    obj.setColumnCount(5);



    //	enable row selectors

    obj.setSelectorVisible(true);

    obj.setSelectorText(function(i){return this.getRowPosition(i)+1});



    //	set headers width/height

    obj.setSelectorWidth(28);

    obj.setHeaderHeight(20);



    //	set row selection

    obj.setSelectionMode("single-row");



    //	set click action handler

    obj.onCellClicked = function(event, col, row){window.status = this.getCellText(col, row)};



    //	write grid html to the page

    obj.refresh();



    </script>

</body>

</html>

While the width/height of the grid match the width/height of the parent DIV, the grid appears larger than the div block (the grid is clipped because the overflow is set to hidden). Tests have shown the width is greater by 8px and the height is greater by 4px. What further complicates this issue is a requirement to make the width 100%. Tests have shown with this setting, the overlap still occurs. Any ideas on what is causing this issue and how it can be corrected?

Your example is a little too lengthy to easily work out what's going on. I would suggest you try with a smaller example.

As far as the DIV/AW interaction is concerned, I'm working on AW grids within a DIV so I tried it with my own code. In the CSS style, I changed it to this -
padding:0px; border:none;
And my AW code has -

obj.setStyle("width", "100%")

obj.setStyle("height", "100%")

I don't set a style position for the grid.

It seems to work OK (looks the same, anyway. Of course, I can't see a border now). Note that I place the AW code in the DIV section. I.e. -

<div id=two class= ...

<script>

AW code

</script></div>

Can you elaborate on what you are trying to do with the DIVs?

The DOCTYPE which you are using activates 'standards-compliant' box model, which means the CSS width/height are applied to the element content (excluding border and padding, i.e. 8px/4px for AW controls) -

http://www.activewidgets.com/javascript.forum.18932.1/doctype-problem.html

If you need the grid to fit the parent - add 4px/2px padding to the parent div (or, better, remove the doctype or change it to the one which triggers 'quirks' mode).

Alex, the problem appears for strict doc when you set the width to 100%. With the current version the grid has 4 px more than its parent whenever the width is set using style - so why don't you once for all fix the issue by accepting different unit in the setSize() could be "%", "em" or "px"?

Thanks everyone for your comments. This doctype is required and so I went ahead and used the padding suggestion. Worked great.

Forum search