How to center a div wrapped with panel in asp.net?

Question

Hi,

I created a div(search result term bar) which should display only when user enters a search term and it should appears in center of the layout. See the screen shot 1) before and 2) after to get a clear idea.

I used the css style like below

search_list{ margin:0 auto; width:1000px; }

So that i appears center in all resolutions.

Now i implemented an asp.net panel ajax control to show the div only when user enters the search term.

Here below is my code:

<asp:Panel runat="server" ID="pnlsearchinfo">
                            <div class="search_list" id="SearchText" visible="false" runat="server">
    <%--<div class="search_text">Search Result for </div>--%>

    <div class="search_term">
        <asp:Label ID="lblsearchtxt" runat="server" Text=""></asp:Label></div>
    <div class="search_return">
        <asp:ImageButton ID="IbtnSearchClose" ImageUrl="images/blu-close.jpg" runat="server"  align="absmiddle" OnClick="IbtnSearchClose_Click"  /><asp:LinkButton
            ID="lnkSearchClose" runat="server" OnClick="lnkSearchClose_Click" >Return to Full List</asp:LinkButton></div>                
    <br class="clr_flt" />
   </div><!-- end search_list --></asp:Panel>
   <cc1:AlwaysVisibleControlExtender TargetControlID="pnlsearchinfo" ScrollEffectDuration="1"
                    ID="AlwaysVisibleControlExtender1" VerticalOffset="225"  runat="server" Enabled="true">
                </cc1:AlwaysVisibleControlExtender>

But the problem is the margin:0 auto; is working fine in IE(search result term bar is centered). But in firefox its throwing issue(aligned to left) screenshot.

When i use Horizonaloffset its working in firefox. But it's not resolution friendly. Can i center the search result term bar with some other controls?

Thanks in advance

Answer 1

Have you tried using <div align="center">? Yes, I know the tag is deprecated, but it's still widely supported by browsers, maybe even more than the CSS equivalent, who knows?

Answer 2

I'm guessing that in Firefox, the HTML creatd by the <asp:Panel> is not set to 100% width. Try inspecting it with FireBug and see.

If this is the case, there are two solutions:

• Use CSS to set the width of the Panel to 100%. Along with the CSS you already have, this will allow the <div> to center within it.
• Move the CSS you have now (margin:0 auto; width:1000px;) to control the Panel itself. As the panel looks to be outside the flow of the page, it will center itself within the viewport horizontally.

Answer 3

Try

<div id="SearchText" style="text-align:center;"><div style="width:1000px;">SEARCH RESULT FOR x</div></div>

Answer 4

Put a css class on your panel (by the panel CssClsss property).

This css class must specify a width;

then put your div with margin:0 auto and this div will be centered in the panel

Answer 5

Thanks to all

I used the fixed search bar with css using the below source.

Click here