Floating panels (divs) appearing stacked I want them side by side

Can someone tell me why these would appear stacked at run-time as opposed to side by side?


<asp:Panel id="pnSubContainer" style="width:750px; BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" Runat="server">
      <asp:Panel id="pnHomeModifications" style="FLOAT: left; Width=100px" Runat="server"></asp:Panel>
      <asp:Panel id="pnDurableMedical" style="FLOAT: left; Width=100px" Runat="server"></asp:Panel>
      <asp:Panel id="pnTransportation" style="FLOAT: left; Width=100px" Runat="server"></asp:Panel>
</asp:Panel>

in designmode they appear side by side.... and they definitly fit???   so what gives?
LVL 1
dbedooAsked:
Who is Participating?
 
ethothsConnect With a Mentor Commented:
This appears stacked at design time and side by side at runtime for me.
            <asp:Panel id="pnSubContainer" style="width:750px; BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" Runat="server">
                <asp:Panel id="pnHomeModifications" style="FLOAT: left; Width=100px" Runat="server">A</asp:Panel>
                <asp:Panel id="pnDurableMedical" style="FLOAT: left; Width=100px" Runat="server">B</asp:Panel>
                <asp:Panel id="pnTransportation" style="FLOAT: left; Width=100px" Runat="server">C</asp:Panel>
        </asp:Panel>

Replacing the outer panel with a div give me side by side in both design and run.

To be honest this is what I would expect since it is a known issue that VS does not display divs correctly at design time.



0
 
dbedooAuthor Commented:
is height a factor?   my middle panel will be 1 row of text taller than the others but I didn't think that mattered
0
 
ethothsCommented:
The problem is with the outer div (id="pnSubContainer).

0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
Bob LearnedCommented:
I would try style="position:  absolute", and not FLOAT, if you just want to have 2 panels side-by-side.

Bob
0
 
dbedooAuthor Commented:
What is the problem with the outer div ethoths?   specifics?  I did this same exact thing with divs in html and it works fine ...
0
 
dbedooAuthor Commented:
sorry I spoke too soon
0
 
dbedooAuthor Commented:
Yeah I dont care about design time ... if it would appear correctly during run time is all that matters.  But you say that its runs side by side for you?    weird ... it doesn't for me ...  stacked every time?
0
 
dbedooAuthor Commented:
I fill the content of the panels in server side codebehind... would that effect the order of rendering these panels?
0
 
ethothsCommented:
Not sure about the outer div - Probably a VS bug.

My advice is to look at the source code. What gets rendered in the browser is the important thing. panels should be rendered as simple divs and the positioning and layout depends on the css settings. Do you have other divs on the page? Do you have style setting in other css files taht might be affecting this?

0
 
dbedooAuthor Commented:
yes there are other divs on the page ... but this one(pnSubContainer) is not nested within them.  The only thing that could be throwing it off are the tables Im rendering inside the divs via server side vb. which do have css stuff.  Ill take it out and see what happens.
0
 
dbedooAuthor Commented:
That was it ....  stupid mistake ...  it was .css thing I was doing inside one of the tables....  thanks for the help :-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.