CSS Issue - Can't make <div> appear inline - css

Question

I have the following HTML:
#using (Html.BeginForm("Create", "BicycleSellerListing", FormMethod.Post, new { enctype = "multipart/form-data" })) {
#Html.ValidationSummary(true)
<fieldset style="margin:5px;">
<legend>List a Bicycle for Sale</legend>
<div style="display: inline">
<div style="display: inline">
#Html.LabelFor(model => model.BicycleManfacturer)
</div>
<div style="display: inline">
#Html.DropDownList("ManufacturerList")
</div>
<div style="display: inline">
#Html.LabelFor(model => model.BicycleType)
</div>
<div style="display: inline">
#Html.DropDownList("TypeList")
</div>
<div style="display: inline">
#Html.LabelFor(model => model.BicycleModel)
</div>
<div style="display: inline">
#Html.EditorFor(model => model.BicycleModel)
#Html.ValidationMessageFor(model => model.BicycleModel)
</div>
....
....
I cannot make the labels and the edit field appear next to each other (by using inline). The edit fields always appear below the label. Anyone know what I might be doing wrong?

Answer 1

Inline style means that if space permits than the div will align inline. Now on the parent div you haven't given any width. So it will take up space according to its Child. Now lets suppose first child is inserted. The parent div will take up it's Child's space. Now you want to insert another Child. Even though the next Child has display inline, it will not find any space next to its sibling because the sibling and the parent div are taking same space. Hence it will render in the next line.
Try doing this:
#using (Html.BeginForm("Create", "BicycleSellerListing", FormMethod.Post, new { enctype = "multipart/form-data" })) {
#Html.ValidationSummary(true)
<fieldset style="margin:5px;">
<legend>List a Bicycle for Sale</legend>
<div style="display: inline; width: 1000px;">
<div style="display: inline">
#Html.LabelFor(model => model.BicycleManfacturer)
</div>
<div style="display: inline">
#Html.DropDownList("ManufacturerList")
</div>
...