RadToolBarButton Float: Right - FireFox Display Problem

[Landon]

Hi,

I'm currently using the following CSS to Float my RadToolBar Buttons on the Right:

div.RadToolBar .rtbUL { width: 100%; }

div.RadToolBar .rightButton  { float: right; }

However, when my page is displayed in FireFox my buttons are displayed Floating to the right, but on a second line under the first. Is there any way to prevent this from happening in FireFox? I have attached an image of exactly what is happening.

Thanks,

Landon

[Cori]

Hello Landon,

I have to assume the issue is caused by the,  width:100% style applied to rtbUL. Try setting it to a smaller value and see if that helps.

[Cori]

Or just remove the width:100% style entirely.

[Landon]

Hi Cori,

Thanks for your quick reply. Unfortunately that doesn't solve the problem. Changing/Removing the rtbUL value only moves the buttons around on the second line, not only in FireFox, but it disables the "float: right" in other browsers (ex. IE, Safari).

I have attached an updated image of the ToolBar without the "div.RadToolBar .rtbUL { width: 100%; }" CSS.

Best Regards,

Landon

[Cori]

Hello Landon,

If your floating something to the right, it needs to appear before the control it going to float on the right of. Like this example:

<div id="container">
    <div id="toolbar" style="float:right;">I'm floating on the right</div>
    <div id="staticElem">I'm not floating</div>
</div>

That way it doesn't appear on the second line, but on the same line as the content it's floating on the right of.

To solve you second problem, set the width to a small enough value to contain the toolbar without causing it to wrap or cause two lines to appear.

I hope that helps.

[Landon]

Ah,

That was my exact problem, the occurring order of the code! My mistake, I should have noticed this earlier. That would explain why it only happens on my one page.

Thanks again!