How do I set a CSS width from a javascript function result?

Question

I have a GridView in a div wrapper, there is some row headers along the left side that need to be always visible. This all works so far, but I need the wrapper to have a variable width to fit the browser size.

I got the desired width of the wrapper based on the browser width using some javascript but I can't figure out how to set this width as the wrapper.width.
It doesn't have to update the wrapper width after the page loads or check for browser resizing.

my poor attempt at diagramming:

|   |column headers      |
| R |--------------|      
| O | gridview data      |
| W |              |      
|   |  this part         |
| H |  will scroll |<--->
| E |  while the         |
| A |  Row headers |
| D |  stay there        |
| E |              |
| R |______________      |
| S | scroll bar   |

asp:(see edit below)

<pseudocode>
 <table>
   <tr><td>row headers</td>
       <td><div class="Wrapper">
              <asp:GridView>dataBind()</asp:gridview>
       </div></td></tr>
 </table>
</pseudocode>

css:

div.Wrapper 
{
 width:800px;<--this needs to change based on the browser width
 overflow: auto;
}

javascript:

var Width = window.innerWidth - 275 || document.body.clientWidth - 275

I either need a way to set the wrapper.width = Width or a completely different and hopefully better way to achieve this.

I tried using a % for the width but it doesn't use the browser window as 100%, it takes the % of the full width of the whole GridView which does nothing for me.

Thanks in advance for any help.

Edit: added some code

<script type="text/javascript">
    var Width = window.innerWidth - 275 || document.body.clientWidth - 275;
    var divElement = document.getElementById("wrappist");
<!--I tried a few different things at this point, here are a couple of them-->
    divElement.offsetWidth = "80px";
    divElement.style.width = Width.toString() + 'px'; 
</script>

<div runat="server" id="wrappist" class="Wrapper">
  <asp:GridView runat="server" ID="ALPGrid" CssClass="Grid"
       CellPadding="5" GridLines="Both" AutoGenerateColumns="false"
       OnRowDataBound="ALP_RowDataBound" OnRowCreated="ALP_RowCreated"
       DataKeyNames="ItemID">
  <HeaderStyle CssClass="GridHeader" />
  <RowStyle CssClass="Row" />
  <columns>column stuff in here</columns>
  </asp:GridView>
</div>

Answer 1

Try this:

var Width = window.innerWidth - 275 || document.body.clientWidth - 275
var divElement = document.getElementById('idOfDiv');
d.style.width = Width.toString() + 'px';

edit: forgot to explain it. This sets the width of the div inline on the element so it will override the styling in your class.

Answer 2

How about a pure CSS solution?

<div class="wrapper">
<div class="row_headers"></div>
<div class="grid"></div>
</div>

the css

.wrapper
{
width:800px; /*remove/change */
}
.row_headers
{
float:left;
width:100px; /*keep same as .grid margin-left */
height:300px;
background-color:#333;
padding-bottom:16px;
}
.grid
{
margin-left:100px; /*keep same as .row_headers width */
height:300px;
padding-bottom:16px;
background-color:#ddd;
overflow:auto;
}