Creating two Column layout using CSS for ASP.NET MVC3 create view

Question

I am new to CSS. I have a create records page and it has html elements like textboxes, dropdown lists, multiselect lists. The View create.html is as follows :

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>

        <div class="editor-label">
            @Html.LabelFor(model => model.SDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.SDate)
            @Html.ValidationMessageFor(model => model.SDate)   
             @Html.EditorFor(model => model.STime)
            @Html.ValidationMessageFor(model => model.STime)         
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.EDate)
        </div>

        <div class="editor-field">
            @Html.EditorFor(model => model.EDate)
            @Html.ValidationMessageFor(model => model.EDate)
            @Html.EditorFor(model => model.ETime)
            @Html.ValidationMessageFor(model => model.ETime)
        </div>


         <div class="editor-label">
            @Html.LabelFor(model => model.SitID)
        </div>
        <div class="editor-field">
            @Html.DropDownList("SiteID", new SelectList(ViewBag.Sit as System.Collections.IEnumerable, "SitID", "SitName"), "Select a Sit", new { id = "ddlSit" })

            @Html.ValidationMessageFor(model => model.SitID)
        </div>



        <div class="editor-label">
            @Html.LabelFor(model => model.UnitID)
        </div>
        <div class="editor-field">

            @Html.ListBoxFor(Model => Model.SelectedUnits, new SelectList(ViewBag.Unit as System.Collections.IEnumerable, "UnitID", "UnitName"), new { id = "ddlUnit", size="4", style = "width: 150px"  })
            @Html.ValidationMessageFor(model => model.UnitID)
        </div>


         <div class="editor-label">
            @Html.LabelFor(model => model.DestID)
        </div>
        <div class="editor-field">
            @Html.DropDownList("DestID", "--Select One--")
            @Html.ValidationMessageFor(model => model.DestID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.RestID)
        </div>
        <div class="editor-field">
            @Html.DropDownList("RestID", "--Select One--")
            @Html.ValidationMessageFor(model => model.RestID)
        </div>

         <div class="editor-label">
            @Html.LabelFor(model => model.Desc)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Desc, 10, 55, null)
            @Html.ValidationMessageFor(model => model.Desc)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>


    </fieldset>
}

The CSS style defined is as follows:

fieldset 
{

    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

.display-label, 
.editor-label 
{

    margin: 1em 0 0 0; 
}

.display-field, 
.editor-field 
{
    margin: 0.5em 0 0 0; 
}

Now, the view is displayed everything as left aligned and below each label the textbox is displayed. I would like to have nice two colmn layout in the view so that I do not have to scroll down in that page and also it will look nicer if I have few fileds in a same row (e.g. startdate, enddate).

Please help me. Thank you!

dknaack · Accepted Answer · 2011-07-19 06:52:26Z

3

If you doing divs, every div is (by default) in one row. One way is to do the following 3 steps.

1) set the height of you label

2) set the position of you fields to relative

3) set the top of your fields to -LABEL_HEIGHT

.display-label, 
.editor-label 
{
    height:24px;
    margin: 1em 0 0 0; 
}

.display-field, 
.editor-field 
{
    position:relative;
    top: -24px;
    float:right;
    margin: 0.5em 0 0 0; 
}

hope that helps

answered Jul 19, 2011 at 6:52

dknaack

60.7k28 gold badges166 silver badges211 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating two Column layout using CSS for ASP.NET MVC3 create view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related