CODEWITHSUNDEEP
asp.netcsscontrols
vbNewbie
vbNewbie

Reputation: 3345

aligning controls on page for asp.net web application

I am trying to set up a web application with a datagrid and a chart on one tabpanel of a tabcontainer. It started of ok but I need to have the chart positioned right next to the datagrid. I read about using css but cannot get it to work. I have added a separate css file

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="defaultStyle.css"/>

....

<asp:GridView ID="GridView1" runat="server" AllowSorting="True" 
                AutoGenerateColumns="False" BackColor="White" BorderColor="#336666" 
                BorderStyle="Double" BorderWidth="3px" CellPadding="4" 
                DataSourceID="SqlDataSource1" GridLines="Horizontal" Height="92px" 
                Width="327px" HorizontalAlign="Right">
<RowStyle BackColor="White" ForeColor="#333333" HorizontalAlign="Right" />
        <PagerStyle HorizontalAlign="Center" BackColor="#336666" ForeColor="White" /> 
                <Columns>
                    <asp:BoundField DataField="RecordsCount" HeaderText="RecordsCount" 
                        ReadOnly="True" SortExpression="RecordsCount"/>
                    <asp:BoundField DataField="collectionDate" HeaderText="collectionDate" 
                        ReadOnly="True" SortExpression="collectionDate" />
                </Columns>
                <FooterStyle BackColor="White" ForeColor="#333333" />
                <SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
             </asp:GridView>

Upvotes: 0

Views: 3154

Answers (2)

NakedBrunch
NakedBrunch

Reputation: 49413

Wrap your controls in divs and float them to the left. Make sure to clear the float when finished.

<div style="float:left;">
    <!-- Insert GridView -->
</div>
<div style="float:left;">
    <!-- Insert Chart Control -->
</div>
<div style="clear:both;" />

Upvotes: 1

Leon
Leon

Reputation: 3401

Wrap each (Grid and Chart) in its own DIV element.

Style DIVs with top/left, or float css attributes as needed. You might also need to get margin involved to get the look you want.

Upvotes: 1

Related Questions