Search code examples
asp.net-mvctwitter-bootstrapasp.net-mvc-views

MVC View columns do not start at same height


Using MVC 5 and bootstrap. I have a view that has two rows. The top row has two columns. Why is it that when the page is done the right column appears to be starting a little lower then the left one? Also, the second row(bottom) is not as wide as the first one (top). I have tried making custom classes, I have tried adding and removing various properties to the div tags, but the problem remains.

Code below. Any help would be appreciated.

@model MVCConv.Models.House


<div class="row">
    <div class="col-md-12">
        <h3>@Html.DisplayFor(model => model.Name)</h3>
    </div>
</div>

@{
    var pageDescription = Model.Page_Description.ToString();
    var isHtmlDescrption = Model.isHTML;
}

<div class="row">

    <div class="col-md-2 container-fluid full-width">
        <div class="MyCustomClass">Contact Info</div>

        <dl class="dl-horizontalus">
            <dt>
                @Html.DisplayNameFor(model => model.Name)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Name)
            </dd>

            <dt>
                Site URL:
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Site_URL)
            </dd>

            <dt>
                Contcat Name:
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Contact_Name)
            </dd>

            <dt>
                Email Address:
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Contact_Email)
            </dd>

            <dt>
                Contact Phone:
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Contact_Phone)
            </dd>
        </dl>

        <div class="MyCustomClass">Special Offers</div>
        <div class="whiteCellus">@Html.DisplayFor(model => model.Special)</div>

    </div>

    <div class="col-md-10 panel-body container-fluid full-width">
        <div class="MyCustomClass">About the House</div>

        @if (Convert.ToBoolean(isHtmlDescrption))
        {@Html.Raw(pageDescription)}
        else
        {@Html.Raw(pageDescription.Replace(Environment.NewLine, "<br/>"))}

    </div>
</div>

<hr />

<div class="col-md-12 container-fluid full-width">
    <div class="MyCustomClass">History</div>
    @{
        using (var context = new MVCConv.Models.Houses())
        {
            var record = context.ImportedSP(Model.HouseID).ToList();
            @Html.Partial("_PartialPage", record
        }
    }
        </div>

Solution

  • After taking the page apart and trial and error but removing divs to figure out which one is causing the columns to not be even...

    Panel-body is the root cause of the trouble. When I removed it, the columns aligned to the top and all rows are also aligned and take the entire screen width.