CODEWITHSUNDEEP
cssasp.net
Michael
Michael

Reputation: 13616

How to make all elements in one line?

I have this css and asp code:

<asp:Panel ID="dvPagingFeatureArea" Style="color: #333333; background-color: #FFCC66;" runat="server" Visible="False">
    <div style="width: 100%; margin-right: 25%;" aria-hidden="False">
        <asp:Label Text="Number:" runat="server" />
        <asp:DropDownList ID="ddlFeaturePaging" runat="server" AutoPostBack="True" Style="background-color: #FFCC66; width: 70px;">
        </asp:DropDownList>
    </div>
    <div>
        <asp:ImageButton ImageUrl="../Images/arrow-left-01-128.png" runat="server" ID="prevItem" Style="width: 20px;" AlternateText="previous" />
        <asp:ImageButton ImageUrl="../Images/arrow-left-01-128.png" runat="server" ID="nextItem" Style="width: 20px;" AlternateText="next" />
    </div>

</asp:Panel>

Here how it looks in view:

enter image description here

I need to change the view and to make all elements in one line.

Like this:

enter image description here

What do I have to change in my css code above to get desired view?

Upvotes: 1

Views: 122

Answers (2)

Dr. Aaron Dishno
Dr. Aaron Dishno

Reputation: 1919

basically, have the first div float right:

<div style="width: 100%; margin-right: 25%; float: right;" aria-hidden="False">

Upvotes: 1

Zaki
Zaki

Reputation: 5600

You need to wrap it inside a div with float:left; and set the dropdown div to float: right; and buttons div to float: left; - here is fiddle (I have removed asp controls):

<div style="float:left">
  <div style="float:right" aria-hidden="False">
    <label>Number:</label>
    <select ID="ddlFeaturePaging" runat="server" AutoPostBack="True" Style="background-color: #FFCC66; width: 70px;">
    </select>
  </div>
  <div style="float: left;">
    <input type="button" Style="width: 120px;" value="button" />
    <input type="button" Style="width: 120px;" value="button" />
  </div>
</div>

</div>

Upvotes: 1

Related Questions