have gridview occupy remaining space in div

See more:

CSS

HTML

i have a div containing an image and a gridview. I have set the image width and height to 125px and would like to have the gridview stretch its width to the remaining space in the div. very unsure how to do this...or why the solution i've tried isn't working.

though it is working in vs web developer's design view lol.

here's the html:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">

<div class="mainDiv">
    <div class="picDiv">
        <img width="125px" height="125px"/>
    </div><!-- picDiv -->

    <div class="gvDiv">
        <asp:GridView class="gvHome" ID="homeVolunteerGV" runat="server" 
             AutoGenerateColumns="False" GridLines="Horizontal"
             HorizontalAlign="Center" RowStyle-HorizontalAlign="Center">
             <columns>
                 <column1>
                 <column2>
             </columns>       
    </div><!-- gvDiv -->
</div><!-- mainDiv -->
</asp:Content>

.mainDiv
{
    width:100%;
    background-color:green;
    height:125px;
}

.picDiv
{
float:left;
}

.gvDiv
{
float:right;
width:100%;
}

thank you.