How to modify dimensions of a div during run time

Question

I have a div and a gridview in my page as shown below:

 

<div id="gdDiv" style="overflow:scroll; height:500px; width:1270px; background-color:Black;" onload="MakeEqualDimension()"> <asp:GridView ID="gdView" runat="server" Width="1200px" Height="350px" RowStyle-HorizontalAlign="Center" RowStyle-VerticalAlign="Middle" HeaderStyle-HorizontalAlign="Center" HeaderStyle-BackColor="Maroon" HeaderStyle-ForeColor="White" HeaderStyle-Height="5px" RowStyle-BackColor="Black" RowStyle-ForeColor="White" GridLines="Both" ShowFooter="true" RowStyle-Wrap="false" onrowcreated="gdView_RowCreated" onrowdatabound="gdView_RowDataBound" HeaderStyle-Font-Size="10px" RowStyle-Font-Size="10px" HeaderStyle-Font-Bold="true" FooterStyle-Font-Bold="true" FooterStyle-Font-Size="10px"> </asp:GridView> </div>

The gridview is populated dynamically and so its height and width varies depending upon the number of data. I want the div also to change its height and width based on the height & width of the gridview after it is populated. Hence I have tried the following javascript in the client side.

 

<script type="text/javascript"> function MakeEqualDimension() { if ((document.getElementById('gdDiv').offsetHeight) > (document.getElementById('gdView').getAttribute("height"))) {             document.getElementById('gdDiv').style.height = (document.getElementById('gdView').getAttribute("height")) + "px"; } if ((document.getElementById('gdDiv').style.width) > (document.getElementById('gdView').getAttribute("width"))) {             document.getElementById('gdDiv').width = (document.getElementById('gdView').getAttribute("width")) + "px"; } } </script>

But its not working. Please help me. Thanks.