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>
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.