user6592730 user6592730 - 3 months ago 9
ASP.NET (C#) Question

How to move items to left inside a div?

I have a label,checkboxlist and a datagridview within a div. I have used inline css to move items left. But it doesn't work as i expect. How can i move them? I want all the three items in a row. Below i have added my aspx code.



<div id="div2" style="width:100%; height:auto; margin-top:30px">
<div id="div21" style="width: 50%; height:auto">
<div id="div211" style=" width:15%; height:auto">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
</asp:Label>
</div>
<div id="div212" style=" width:60%; height:auto; float:left">
<asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
</asp:CheckBoxList>
</div>
</div>


<asp:GridView ID="GridView1" runat="server" style="float:left">

</asp:GridView>

</div>




Answer

You need to wrap gridview in div and set float:left to that div. Also inner div needs to have float:left as well.

Try below html

<div id="div2" style="width:100%; height:auto; margin-top:30px">
        <div id="div21" style="width: 50%; height:auto;float:left">
            <div id="div211" style=" width:15%; height:auto;float:left">
                <asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
                </asp:Label>
            </div>
            <div id="div212" style=" width:60%; height:auto; float:left">
                <asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
                </asp:CheckBoxList>
            </div>                                 
        </div>        

        <div  style="float:left;width:45%">


        <asp:GridView ID="GridView1" runat="server">
            <Columns>
                <asp:TemplateField HeaderText="SomeText">

                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </div>