Different elements in repeater positioning issue

Question

I have a webforms project and am new to the repeater control and noticed some really weird positioning behavior based on element type. I`m not sure if it is just me or what. Inside my item template I have a link button and a div with several controls (I set this styling on the div and textbox like this purposely to highlight the issue):

<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="repeater_cmd" >
<ItemTemplate>

//this link button sets the visibility of the div below

<asp:LinkButton id ="clr_div" CommandName="nav-to-page" runat = "server">   
</asp:LinkButton>

//this div has its visibility set by the link button

<div  ID="rdiv" runat= "server" style = "width:700px; background:white; height:100px;">

<asp:TextBox ID="text1" style = "width:700px;height:1px;" runat="server">
</asp:TextBox>

</div>

</ItemTemplate>
</asp:Repeater>

My item command:

protected void repeater_cmd(object source, RepeaterCommandEventArgs e)
{
    if (e.CommandName == "nav-to-page")
    {
        //hide any open divs
        for (int i = 0; i < Repeater1.Items.Count; i++)
        {
            RepeaterItem item = Repeater1.Items[i];
            item.FindControl("rdiv").Visible = false;
        }
        //then show our div
        e.Item.FindControl("rdiv").Visible = true;
    }
}

Now is the weird part -- no matter which link button I click on, the div is shown behind the link buttons at the top of the repeater and the text box is shown directly below the link button I clicked on! I just want my whole div to show beneath the button I just clicked. To make matters worse, if I look at the markup it says that the textbox is inside the div but it clearly is not rendering that way. Page source shows:

<div id="rdiv" style="width:700px; background:white; height:100px;">
<input name="ctl00$DetailsBoxHolder$Repeater1$ctl11$text1" type="text" id="text1" style="width:700px;height:1px;" />
</div>

What it looks like on the page (div behind the link buttons on top, text box below the link button that was clicked:

    ----    ----    ----
....-  -....-  -....-  -....
.   -  -    -  -    -  -   .
....-  -....-  -....-  -....
    ----    ----    ----

    ----    ----    ----
    -  -    -  -    -  -
    -  -    -  -    -  -
    -  -    -  -    -  -
    ----    ----    ----
...........................
.                         .
...........................

I noticed that, regardless of whether the item is rendered as an inline or block level element, all elements that have some native postback or input property, regardless of whether its being used, get positioned correctly whereas those that dont always get put behind the top row in the repeater. So buttons, textboxes, etc (any input really) get positioned correctly. Divs, spans, Panels, etc, go to the top. My problem is that I need some sort of panel or span that I can put styling on and put my various controls into. Help!

Answer 1

I changed my div to a panel and added the the following line to the style to fix the issue:

overflow:hidden;

Oddly enough it didn`t work if I kept it as a div, even though a Panel just gets rendered as a div anyway. Weird.