Hi,

Ive used the Collapsible Panel extender but the content displays to the right of the title rather than beneath it and I can't see what I'm doing wrong. 

The code is:

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"

TargetControlID="ContentPanel"

ExpandControlID="TitlePanel" 

CollapseControlID="TitlePanel" 

Collapsed="True"

TextLabelID="Label1" 

ExpandedText="(Hide Details...)" 

CollapsedText="(Show Details...)"

ImageControlID="Image1" 

ExpandedImage="~/images/collapse_blue.jpg" 

CollapsedImage="~/images/expand_blue.jpg"

SuppressPostBack="true">

</cc1:CollapsiblePanelExtender>

<asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader"> 

  <asp:Image ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg"/>

Chat Title&nbsp;&nbsp;

  <asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>

</asp:Panel>

<asp:Panel ID="ContentPanel" runat="server" CssClass="MainText">

<h1>

<br />

Just some general chat ...

</h1>

</asp:Panel>

I did remove float: left; on the header css class and the content was rendered properly, under the header.

.collapsePanelHeader
{
width: 580px;
height: 20px;
color: Yellow;
background-color: #0000FF;
font-weight: bold;
/*float: left;*/
padding: 5px;
cursor: pointer;
vertical-align: middle;
}

I think you should use the same padding on the content as for the header (5px) otherwise your header will be wider than the content.

Cheers,

Florin

Florin,

Works a treat - thanks.

Craigton

Yes, remove float:left that will cause the next panel goes to the right side.

If you need set it with float:left to set the content location, you can set some div with float:left inside the header panel instead of setting on the header panel directly. If this is what you want, don't forget to set "float:none" for the last div inside header panel to make it back to work.