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"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <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 -->
        #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;}

    <!-- grid data -->
        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"

    <!--- 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>


    //	create ActiveWidgets Grid javascript object
    var obj = new AW.UI.Grid;
    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

    //	set number of rows/columns

    //	enable row selectors
    obj.setSelectorText(function(i){return this.getRowPosition(i)+1});

    //	set headers width/height

    //	set row selection

    //	set click action handler
    obj.onCellClicked = function(event, col, row){window.status = this.getCellText(col, row)};

    //	write grid html to the page


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?
C. Bustamante
March 28,
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= ...
AW code

Can you elaborate on what you are trying to do with the DIVs?
March 28,
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) -


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 (ActiveWidgets)
March 31,
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"?

Philippe Marzin
March 31,
Thanks everyone for your comments. This doctype is required and so I went ahead and used the padding suggestion. Worked great.
C. Bustamante
April 3,

This topic is archived.

See also:

Back to support forum