ListView control

I have designed a mockup in Photoshop and I intend to apply it to my product catalog's ListView control but it does not seem to be displaying it right (misaligned?) and I hope someone here could pintpoint my mistake as I've been trying to figure out to no avail.

Expected result/Mockup:

After debug (don't mind the missing photos):

Take a look at my codes,

CSS:

.productItem {
     width: 200px;
     float: left;
     padding: 5px;
     margin: 5px;
     text-align: center;
     background-color: White;        
}
.cell1 
{
     width:117px;
     height:27px;
     background-image: url("images/blackbutton.jpg");
     float:left;
     font-size:12px;
     vertical-align:middle;
     color:White;
     text-align:center;
}
.cell2 
{
     width:118px;
     height:27px;
     background-image: url("images/orangebutton.jpg");
     float:left;
     font-size:12px;
     vertical-align:middle;
     color:White;
     text-align:center;
}

ListView narkup:

<div class="catalog">
    <asp:ListView runat="server" ID="listView" GroupItemCount="3" DataSourceID="AccessDataSource1">
        <LayoutTemplate>
            <div style="height: 962px;">
            <div style="width: 790px;">
                <asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
                <asp:DataPager runat="server" ID="dpMyDatePager" PageSize="3" PagedControlID="listView" .Ю
            </div>
        </LayoutTemplate>
        <GroupTemplate>
            <div style="clear: both;">
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
            </div>
        </GroupTemplate>
        <ItemTemplate>
      开发者_如何学C      <div class="productItem">
            <div>
                <img src='<%# Eval("ProductUrl") %>' height="180" width="200" />
            </div>
            <div>
                <b>
                   <%# Eval("ProductBrand") %> <%# Eval("ProductModel") %></b>
            </div>
            <div>
                Our Price: $<%# Eval("NormalPrice") %>
            </div>
        </div>
        <div class="cell1">Add to cart</div>
        <div class="cell2">View details</div>
    </ItemTemplate>
    </asp:ListView>
</div>

Change cell1 and cell2 width to 50% and try following layout:

<LayoutTemplate>
    <div style="height: 962px;">
        <div style="width: 790px;">
            <asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
        </div>
        <asp:DataPager runat="server" ID="dpMyDatePager" PageSize="6" PagedControlID="listView"></asp:DataPager>
    </div>
</LayoutTemplate>
<GroupTemplate>
    <div style="clear: both;">
        <asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
    </div>
</GroupTemplate>
<ItemTemplate>
    <div class="productItem">
        <div>
            <img src='<%# Eval("ProductUrl") %>' height="180" width="200" />
        </div>
        <div>
            <b>
                <%# Eval("ProductBrand") %>
                <%# Eval("ProductModel") %></b></div>
        <div style="clear: right;">
            Our Price: $<%# Eval("NormalPrice") %></div>
        <div class="cell1">
            Add to cart</div>
        <div class="cell2">
            View details</div>
    </div>
</ItemTemplate>