Question

I’ve got the following elements inside a Div element:

<div class="section">
        <%= InventoryGoods.Metadata.PluralLabel %>
        <%= Html.DropDownList("p.Selection", new[]
                                                                    {
                                                                        new SelectListItem{Text = "Todas", Value = "0"},
                                                                        new SelectListItem{Text = "Iguais", Value="1"},
                                                                        new SelectListItem{Text = "Diferentes", Value="2"},
                                                                    })%>
        <div align="right"><a title="Apagar Todos Os Eventos" id="delete_all_Events" class="ui-widget ui-state-default ui-icon ui-icon-trash">
        </a></div>
    </div>

I’d like to display the plural label at the center (as it is doing now), the dropdownlist right after this plural label and the widget to the right most side of this div.

The code I have written above does what I want but places the widget on the line below the dropdownlist making 2 lines inside this div.

How can I make it have only a single line?

Answer 1

A <div> is by default a block element. HTML block elements sits in its own line. Replace the <div align="right"> by a <span style="float:right;"> and put it before the dropdown (to achieve the desired effect in buggy IE6/7 as well). A <span> is by default an inline element.

In a nut: it should end up like this in “raw” HTML:

<div style="text-align: center;">
    <span style="float: right;">right</span>
    <select><option>option</option></select>
</div>

That said, prefer CSS classes above inline styles, the above is just a basic example.