CODEWITHSUNDEEP
csshtml
yesman
yesman

Reputation: 7838

Horizontally aligning elements in a field set

I have this fieldset in an HTML form:

<fieldset id="itemListSelect">
    <p id="itemList"><label class="field">Item:</label> @Html.DropDownList("transaction_itemList", Model.ItemList, "")</p>
    <p id="itemQuantity"><label class="field">Quantity:</label> @Html.TextBox("transaction_itemQuantity", "", new { style = "width:75px;" })</p>
    <p id="removeItemFromTransaction">Remove this item</p>
</fieldset>

I did this CSS:

#itemList {
    float: left;
}

#itemQuantity, #removeItemFromTransaction {
    float: right;
}

And I get the above result, while I'm looking to get the below result.

Visual representation of my desired results

How do I edit my CSS to get me the result I want?

Upvotes: 0

Views: 938

Answers (1)

Alien
Alien

Reputation: 3678

#itemListSelect p{float: left; margin-right:30px;}
#itemListSelect p label{display:block;}  
#removeItemFromTransaction{padding-top:20px;}

here is jsFlddle http://jsfiddle.net/tjnx8pxs/

Upvotes: 1

Related Questions