Relative Position not working at all

Hello all. I have some code in my ASP.NET 2.0 webpage which doesn't seem to be working. Basically I have several controls with accompanying labels, all not visible by default. Each control/label is in their own asp.net table with a certain ID so that I can easily hide and unhide them. I have all of these inside a panel on my page. I then have a check box list that when the user checks a certain box, that specific control will then be visible, and so on and so forth for all boxes. What the problem is that if you start checking more than 1 box, each control (or essentially asp table) becomes visible below the previous one, so all controls are in a single "column" instead of flowing naturally across the page. I've tried setting the style position to relative but it doesn't seem to be doing anything. Any thoughts on this? Sample code is below:

   <asp:Panel Visible="false" ID="pnlAdminInput" runat="server" GroupingText="Input:">   
    <asp:Table style="position:relative" runat="server" ID="tableEID" GridLines="Both">
        <asp:TableRow runat="server">
            <asp:TableCell runat="server"><asp:Label ID="lblEID" runat="server" Text="EID:" /><br /><asp:DropDownList ID="ddEID" runat="server" DataSourceID="EIDData" DataTextField="EID" DataValueField="AnimalID" /></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Table style="position:relative" runat="server" ID="tableBirthWeight" GridLines="Both">
        <asp:TableRow runat="server">            
            <asp:TableCell runat="server"><asp:Label ID="lblBirthWeight" runat="server" Text="Birth Weight (LBS):" /><br /><asp:TextBox ID="tbBirthWeight" runat="server" /></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
...
...
...
</asp:Panel>

Code (markup):

 

Hi,

I always find it easier to debug the generated HTML than the ASPX controls.

But anyway, to make things flow across the page, elements need to be displayed inline. Try display:inline as a CSS style if that doesn't work, try float:left as a style, to make your tables float left.

Try saving the output HTML as a file and changing that first. Much easier than trying to debug the code as ASPX controls IMHO.

Gary

 

Thanks for your help. I did eventually have to use inline and just didn't think of that before. Though, for some reason, though the tables are now right next to each other horizontally, there's always a decent space between each new line when the tables spill over to the next line. I'd like them all to be together... any ideas? I can provide more code if needed. Thanks.

 

having you tried adding padding:0;margin:0 to the stylesheet

 

try float:left;

 

you should get firebug or IE developer tool bar, so you can see the problem in real time