CSS for width of asp:ListView

Question

I've read that the ListView itself can't take CSS to adjust its width, but that you do it in the ItemTemplate, but I just can't get it. I'm trying to put three ListView controls side by side. Each control has an image and text to the right. Think Windows Explore file list, but only a single column with a name.

The text in each ListView will be less than 32 characters, so there should be plenty of room, but each ListView takes up more than 50% of the screen no matter what I've tried. CSS is not my strong suit.

Current CSS which is wrong

.lv_table{
    width:500px;
    border: 1px solid #ccc;
}
.lv_tr 
{
    width: 100px;
}
.list_view 
{
    border-style: solid;
    border-width: 2px;
    border-color: #000000;      
}

.list_image 
{    
    float: left;
    display: inline-block;        
}

.list_item_large 
{
    font-size: 1.6em;
    color: #000000;
    padding: 8px 0px 0px 0px;    
    margin: 0px auto;
    display: inline-block;  
    text-align:left;        
    min-height: 32px;      
}

ListView Controls

<table  class="lv_table">
<tr class="lv_tr"><td  class="list_view">
 <asp:ListView runat="server" ID="lvwCategories" >
        <LayoutTemplate>
            <div style="width: 500px;">
                <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
            </div>
        </LayoutTemplate>

        <ItemTemplate>            
            <div class="list_image">
                    <img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
            </div>
            <div class="list_item_large ">
                <a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
            </div>               
        </ItemTemplate>
        <ItemSeparatorTemplate>
            <div>
            </div>
        </ItemSeparatorTemplate>
        <EmptyDataTemplate>
            <div>
                <img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
            </div>
            <div>
                <b>No Categories Found</b>
            </div>               

        </EmptyDataTemplate>
    </asp:ListView>
    </td>
    <td>&nbsp;</td>
    <td  class="list_view">
        <asp:ListView runat="server" ID="lvwLists">
        <LayoutTemplate>
            <div style="width: 500px;">
                <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
            </div>
        </LayoutTemplate>

        <ItemTemplate>            
            <div class="list_image">
                <img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
            </div>
            <div class="list_item_large ">
                <a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
            </div>               
        </ItemTemplate>
        <ItemSeparatorTemplate>
            <div>
            </div>
        </ItemSeparatorTemplate>
        <EmptyDataTemplate>
            <div>
                <img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
            </div>
            <div>
                <b>No Categories Found</b>
            </div>               

        </EmptyDataTemplate>
    </asp:ListView>
    </td>
        <td>&nbsp;</td>
    <td  class="list_view">
        <asp:ListView runat="server" ID="lvwItems">
        <LayoutTemplate>
            <div style="width: 500px;">
                <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
            </div>
        </LayoutTemplate>

        <ItemTemplate>            
            <div class="list_image">
                <img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
            </div>
            <div class="list_item_large ">
                <a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
            </div>               
        </ItemTemplate>
        <ItemSeparatorTemplate>
            <div>
            </div>
        </ItemSeparatorTemplate>
        <EmptyDataTemplate>
            <div>
                <img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
            </div>
            <div>
                <b>No Categories Found</b>
            </div>               

        </EmptyDataTemplate>
    </asp:ListView>
</td>

</tr>
</table>

Answer 1

You can change your .lv_table style width to 100% and give your .list_view style a width:33%; and remove all the inline width:500px; of your <div>'s in your LayoutTemplates.